Navigation

    Logo
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unread
    • Categories
    • Unreplied
    • Popular
    • GitHub
    • Docu
    • Hilfe
    1. Home
    2. Deutsch
    3. Skripten / Logik
    4. Blockly
    5. Bilder mittels LLM ChatGPT Vision ananalysieren

    NEWS

    • ioBroker@Smart Living Forum Solingen, 14.06. - Agenda added

    • ioBroker goes Matter ... Matter Adapter in Stable

    • Monatsrückblick - April 2025

    Bilder mittels LLM ChatGPT Vision ananalysieren

    This topic has been deleted. Only users with topic management privileges can see it.
    • David G.
      David G. @OliverIO last edited by David G.

      @oliverio

      Habe schonmal einen Anfang:

      7c0ac640-4ce1-4e4d-aabe-336f995fbab4-image.png

      Die Funktion:

      const fs = require('fs');
      const OpenAI = require('openai');
      
      // Variablen für API-Key, Bildpfad und Frage
      const API_KEY = api;
      const IMAGE_PATH = bildpfad;
      const QUESTION = frage;
      
      // OpenAI-Client initialisieren
      const client = new OpenAI({
        apiKey: API_KEY, // Verwende die Variable für den API-Schlüssel
      });
      
      // Funktion zum Kodieren des Bildes in Base64
      function encodeImage(imagePath) {
        const imageBuffer = fs.readFileSync(imagePath);
        return imageBuffer.toString('base64');
      }
      
      // Base64-String des Bildes erstellen
      const base64Image = encodeImage(IMAGE_PATH); // Verwende die Variable für den Bildpfad
      
      // Anfrage an OpenAI senden
      async function analyzeImage() {
        try {
          const response = await client.chat.completions.create({
            model: 'gpt-4o-mini',
            messages: [
              {
                role: 'user',
                content: [
                  {
                    type: 'text',
                    text: QUESTION, // Verwende die Variable für die Frage
                  },
                  {
                    type: 'image_url',
                    image_url: {
                      url: `data:image/jpeg;base64,${base64Image}`,
                    },
                  },
                ],
              },
            ],
          });
      
          console.log(response.choices[0]);
        } catch (error) {
          console.error('Error:', error);
        }
      }
      
      
      // Funktion ausführen
      analyzeImage();
      return(response.choices[0]);
      

      Allerdings wird der Log noch zugemüllt, eine Antwort kommt aber:

      javascript.0	13:12:13.916	error	script.js.Eigene_Scripte.aitestbl: ReferenceError: response is not defined
      javascript.0	13:12:13.916	error	at etwas_tun (script.js.Eigene_Scripte.aitestbl:61:5)
      javascript.0	13:12:13.916	error	at script.js.Eigene_Scripte.aitestbl:66:21
      javascript.0	13:12:13.916	error	at script.js.Eigene_Scripte.aitestbl:73:3
      javascript.0	13:12:15.880	info	script.js.Eigene_Scripte.aitestbl: { index: 0, message: { role: 'assistant', content: 'Anhand der Bildzeitstempel ist es Tag. Es ist 13:29 Uhr, was auf den Nachmittag hinweist.', refusal: null }, logprobs: null, finish_reason: 'stop' }
      

      Nun zu meinen Fragen.

      • Wie bekomme ich die Fehler weg?
      • Bekomme ich im JS aus der Antwort den contenet extrahiert?
      • Kann ich den Konenet dann in das result schreiben lassen?

      EDIT
      habe glaube alles hinbekommen:

      const fs = require('fs');
      const OpenAI = require('openai');
      
      // Variablen für API-Key, Bildpfad und Frage
      const API_KEY = api;
      const IMAGE_PATH = bildpfad;
      const QUESTION = frage;
      
      // OpenAI-Client initialisieren
      const client = new OpenAI({
        apiKey: API_KEY, // Verwende die Variable für den API-Schlüssel
      });
      
      // Funktion zum Kodieren des Bildes in Base64
      function encodeImage(imagePath) {
        const imageBuffer = fs.readFileSync(imagePath);
        return imageBuffer.toString('base64');
      }
      
      // Base64-String des Bildes erstellen
      const base64Image = encodeImage(IMAGE_PATH); // Verwende die Variable für den Bildpfad
      
      // Anfrage an OpenAI senden
      async function analyzeImage() {
        try {
          const response = await client.chat.completions.create({
            model: 'gpt-4o-mini',
            messages: [
              {
                role: 'user',
                content: [
                  {
                    type: 'text',
                    text: QUESTION, // Verwende die Variable für die Frage
                  },
                  {
                    type: 'image_url',
                    image_url: {
                      url: `data:image/jpeg;base64,${base64Image}`,
                    },
                  },
                ],
              },
            ],
          });
      
          // Nur den content aus der Antwort zurückgeben
          return response.choices[0].message.content;
        } catch (error) {
          console.error('Error:', error);
        }
      }
      
      // Funktion ausführen
      analyzeImage().then((result) => {
        console.log(result);
      });
      
      
      OliverIO 1 Reply Last reply Reply Quote 0
      • OliverIO
        OliverIO @David G. last edited by OliverIO

        @david-g sagte in Bilder mittels LLM analysieren:

        analyzeImage();

        ja das geht auch, es hätte gereicht:

        let result=await analyzeImage();
        console.log(result);
        

        hinzuschreiben.
        analyzeImage ist eine asynchrone Funktion.
        daher gibt sie eigentlich nur ein promise-objekt zurück, welches irgendwann in der Zukunft aufgelöst wird.

        mit await wartet dann javascript darauf bis das aufgelöst wird und gibt das ergebnis dann weiter falls da was zugewiesen ist
        ohne await geht es gleich weiter auch wenn die funktion noch nicht abgearbeitet wurde.

        David G. 1 Reply Last reply Reply Quote 0
        • David G.
          David G. @OliverIO last edited by David G.

          @oliverio

          Hier mein fertiges Blockly für interessierte:

          833ca05b-bebd-4765-a4a3-f476e7b0a1a5-image.png

          <xml xmlns="https://developers.google.com/blockly/xml">
           <variables>
             <variable id="#^~=}RQE~[:hE?sXCoB$">Bildpfad</variable>
             <variable id="o2iepdh*h(;FbS4Z=9{J">api_key</variable>
             <variable id="Uh*o[9LxAdT1B2TiZdAr">Frage</variable>
           </variables>
           <block type="procedures_defcustomreturn" id="k1J9z=^XFMFehGb%0.og" x="-663" y="-688">
             <mutation statements="false">
               <arg name="Bildpfad" varid="#^~=}RQE~[:hE?sXCoB$"></arg>
               <arg name="api_key" varid="o2iepdh*h(;FbS4Z=9{J"></arg>
               <arg name="Frage" varid="Uh*o[9LxAdT1B2TiZdAr"></arg>
             </mutation>
             <field name="NAME">Bild_Analysieren</field>
             <field name="SCRIPT">Y29uc3QgZnMgPSByZXF1aXJlKCdmcycpOw0KY29uc3QgT3BlbkFJID0gcmVxdWlyZSgnb3BlbmFpJyk7DQoNCi8vIFZhcmlhYmxlbiBmw7xyIEFQSS1LZXksIEJpbGRwZmFkIHVuZCBGcmFnZQ0KY29uc3QgQVBJX0tFWSA9IGFwaV9rZXk7DQpjb25zdCBJTUFHRV9QQVRIID0gQmlsZHBmYWQ7DQpjb25zdCBRVUVTVElPTiA9IEZyYWdlOw0KDQovLyBPcGVuQUktQ2xpZW50IGluaXRpYWxpc2llcmVuDQpjb25zdCBjbGllbnQgPSBuZXcgT3BlbkFJKHsNCiAgYXBpS2V5OiBBUElfS0VZLCAvLyBWZXJ3ZW5kZSBkaWUgVmFyaWFibGUgZsO8ciBkZW4gQVBJLVNjaGzDvHNzZWwNCn0pOw0KDQovLyBGdW5rdGlvbiB6dW0gS29kaWVyZW4gZGVzIEJpbGRlcyBpbiBCYXNlNjQNCmZ1bmN0aW9uIGVuY29kZUltYWdlKGltYWdlUGF0aCkgew0KICBjb25zdCBpbWFnZUJ1ZmZlciA9IGZzLnJlYWRGaWxlU3luYyhpbWFnZVBhdGgpOw0KICByZXR1cm4gaW1hZ2VCdWZmZXIudG9TdHJpbmcoJ2Jhc2U2NCcpOw0KfQ0KDQovLyBCYXNlNjQtU3RyaW5nIGRlcyBCaWxkZXMgZXJzdGVsbGVuDQpjb25zdCBiYXNlNjRJbWFnZSA9IGVuY29kZUltYWdlKElNQUdFX1BBVEgpOyAvLyBWZXJ3ZW5kZSBkaWUgVmFyaWFibGUgZsO8ciBkZW4gQmlsZHBmYWQNCg0KLy8gQW5mcmFnZSBhbiBPcGVuQUkgc2VuZGVuDQphc3luYyBmdW5jdGlvbiBhbmFseXplSW1hZ2UoKSB7DQogIHRyeSB7DQogICAgY29uc3QgcmVzcG9uc2UgPSBhd2FpdCBjbGllbnQuY2hhdC5jb21wbGV0aW9ucy5jcmVhdGUoew0KICAgICAgbW9kZWw6ICdncHQtNG8tbWluaScsDQogICAgICBtZXNzYWdlczogWw0KICAgICAgICB7DQogICAgICAgICAgcm9sZTogJ3VzZXInLA0KICAgICAgICAgIGNvbnRlbnQ6IFsNCiAgICAgICAgICAgIHsNCiAgICAgICAgICAgICAgdHlwZTogJ3RleHQnLA0KICAgICAgICAgICAgICB0ZXh0OiBRVUVTVElPTiwgLy8gVmVyd2VuZGUgZGllIFZhcmlhYmxlIGbDvHIgZGllIEZyYWdlDQogICAgICAgICAgICB9LA0KICAgICAgICAgICAgew0KICAgICAgICAgICAgICB0eXBlOiAnaW1hZ2VfdXJsJywNCiAgICAgICAgICAgICAgaW1hZ2VfdXJsOiB7DQogICAgICAgICAgICAgICAgdXJsOiBgZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwke2Jhc2U2NEltYWdlfWAsDQogICAgICAgICAgICAgIH0sDQogICAgICAgICAgICB9LA0KICAgICAgICAgIF0sDQogICAgICAgIH0sDQogICAgICBdLA0KICAgIH0pOw0KDQogICAgLy8gTnVyIGRlbiBjb250ZW50IGF1cyBkZXIgQW50d29ydCB6dXLDvGNrZ2ViZW4NCiAgICByZXR1cm4gcmVzcG9uc2UuY2hvaWNlc1swXS5tZXNzYWdlLmNvbnRlbnQ7DQogIH0gY2F0Y2ggKGVycm9yKSB7DQogICAgY29uc29sZS5lcnJvcignRXJyb3I6JywgZXJyb3IpOw0KICB9DQp9DQoNCi8vIEZ1bmt0aW9uIGF1c2bDvGhyZW4NCmFuYWx5emVJbWFnZSgpLnRoZW4oKHJlc3VsdCkgPT4gew0KICBjb25zb2xlLmxvZyhyZXN1bHQpOw0KfSk7DQo=</field>
             <comment pinned="false" h="80" w="160">Beschreibe diese Funktion …</comment>
           </block>
           <block type="http_get" id="%@DtL{e5a7xB/z4QWJJD" x="-662" y="-637">
             <field name="TIMEOUT">2000</field>
             <field name="UNIT">ms</field>
             <field name="TYPE">arraybuffer</field>
             <value name="URL">
               <shadow type="text" id="KylM(z%z`LA/%XK_x^*D">
                 <field name="TEXT">http://192.168.99.93/cgi-bin/api.cgi?cmd=Snap&amp;channel=0&amp;user=admin&amp;password=abcd</field>
               </shadow>
             </value>
             <statement name="STATEMENT">
               <block type="debug" id="d:IY2pT_WNG/EqsBccvX">
                 <field name="Severity">info</field>
                 <value name="TEXT">
                   <shadow type="text" id="+Kg)Y%9AYp}{tY^/Vv|_">
                     <field name="TEXT">test</field>
                   </shadow>
                   <block type="procedures_callcustomreturn" id="Th(%,~XXrnkE8m#b)/9D">
                     <mutation name="Bild_Analysieren">
                       <arg name="Bildpfad"></arg>
                       <arg name="api_key"></arg>
                       <arg name="Frage"></arg>
                     </mutation>
                     <value name="ARG0">
                       <block type="http_response_tofile" id="w[MNq!R0Lr|-N$Go+E@L">
                         <value name="FILENAME">
                           <shadow type="text" id="#5YFt*N{B7dOcv]kFRP$">
                             <field name="TEXT">eingang.jpg</field>
                           </shadow>
                         </value>
                       </block>
                     </value>
                     <value name="ARG1">
                       <block type="text" id="qD1A7?Y)DhcB{4-ff0T=">
                         <field name="TEXT">xyz</field>
                       </block>
                     </value>
                     <value name="ARG2">
                       <block type="text" id="DjqZIXmZJ[JX-JqvE=/4">
                         <field name="TEXT">Was ist das für ein Foto?</field>
                       </block>
                     </value>
                   </block>
                 </value>
               </block>
             </statement>
           </block>
          </xml>
          

          const fs = require('fs');
          const OpenAI = require('openai');
          
          // Variablen für API-Key, Bildpfad und Frage
          const API_KEY = api_key;
          const IMAGE_PATH = Bildpfad;
          const QUESTION = Frage;
          
          // OpenAI-Client initialisieren
          const client = new OpenAI({
           apiKey: API_KEY, // Verwende die Variable für den API-Schlüssel
          });
          
          // Funktion zum Kodieren des Bildes in Base64
          function encodeImage(imagePath) {
           const imageBuffer = fs.readFileSync(imagePath);
           return imageBuffer.toString('base64');
          }
          
          // Base64-String des Bildes erstellen
          const base64Image = encodeImage(IMAGE_PATH); // Verwende die Variable für den Bildpfad
          
          // Anfrage an OpenAI senden
          async function analyzeImage() {
           try {
             const response = await client.chat.completions.create({
               model: 'gpt-4o-mini',
               messages: [
                 {
                   role: 'user',
                   content: [
                     {
                       type: 'text',
                       text: QUESTION, // Verwende die Variable für die Frage
                     },
                     {
                       type: 'image_url',
                       image_url: {
                         url: `data:image/jpeg;base64,${base64Image}`,
                       },
                     },
                   ],
                 },
               ],
             });
          
             // Nur den content aus der Antwort zurückgeben
             return response.choices[0].message.content;
           } catch (error) {
             console.error('Error:', error);
           }
          }
          
          // Funktion ausführen
          analyzeImage().then((result) => {
           console.log(result);
          });
          
          

          In der Javascriptinstant noch folgende 2 Module hinzufügen.
          c9090244-d9a4-41f9-b896-680411412654-image.png

          javascript.0	14:07:17.248	info	Start JavaScript script.js.Eigene_Scripte.Tests.Foto_KI_Test (Blockly)
          javascript.0	14:07:17.269	info	script.js.Eigene_Scripte.Tests.Foto_KI_Test: registered 0 subscriptions, 0 schedules, 0 messages, 0 logs and 0 file subscriptions
          javascript.0	14:07:17.837	info	script.js.Eigene_Scripte.Tests.Foto_KI_Test: undefined
          javascript.0	14:07:21.943	info	script.js.Eigene_Scripte.Tests.Foto_KI_Test: Das Foto zeigt eine Straßenansicht, aufgenommen aus einem Fenster. Man sieht mehrere Häuser, eine kurvenreiche Straße und einige Bäume im Hintergrund. Der Himmel ist bewölkt und es scheint, als wäre es tagsüber. Die Sicht ist etwas trüb, wahrscheinlich aufgrund von Wetterbedingungen oder Schmutz auf dem Fenster.
          

          @OliverIO
          Eine Idee wo das undefined her kommt?

          OliverIO 1 Reply Last reply Reply Quote 0
          • OliverIO
            OliverIO @David G. last edited by

            @david-g sagte in Bilder mittels LLM analysieren:

            Eine Idee wo das undefined her kommt?

            es sieht nach einer console.log Ausgabe aus.
            Ergänze mal deinen Lösungspost nochmal mit dem kompletten Javascript was im funktionsblock enthalten ist

            David G. 1 Reply Last reply Reply Quote 0
            • David G.
              David G. @OliverIO last edited by David G.

              @oliverio

              Done

              Edit
              Noch einen Fehler gefunden.
              Die Antwort kommt garnicht aus meinem Debug aus Blockly, sondern aus dem Script direkt.
              Das undefined ist der Debug im Blockly.

              Wie gebe ich die Antwort in das result bzw den return für den JS-Baustein? Evtl kann @paul53 mir das grad sagen. Du hast irgendwann mal gesagt, dass du blockly nicht nutzt ^^.

              paul53 1 Reply Last reply Reply Quote 0
              • paul53
                paul53 @David G. last edited by paul53

                @david-g sagte: Das undefined ist der Debug im Blockly.

                Man kann aus einer Callback-Funktion kein Ergebnis an das Hauptprogramm übergeben. Das Hauptprogramm ist beendet, bevor die Callback-Funktion ausgeführt wird.

                Übrigens ist das Modul "fs" Bestandteil von Node.js und muss nicht installiert werden.

                David G. 1 Reply Last reply Reply Quote 0
                • David G.
                  David G. @paul53 last edited by

                  @paul53

                  Das ist ja "doof".

                  Bleibt also nur ein normales JS?

                  paul53 1 Reply Last reply Reply Quote 0
                  • paul53
                    paul53 @David G. last edited by

                    @david-g sagte: Bleibt also nur ein normales JS?

                    Du kannst das Ergebnis in einen eigenen Datenpunkt schreiben und diesen dann auswerten.

                    analyzeImage().then((result) => {
                      console.log(result);
                      setState('0_userdata.0.OpenAI.Antwort', result, true);
                    });
                    
                    David G. 1 Reply Last reply Reply Quote 0
                    • David G.
                      David G. @paul53 last edited by David G.

                      @paul53
                      Okay, das ist ein gehbarer Workarround.
                      Wenn ich nicht schön anzuschauen 🤣

                      Edit
                      Hab noch keinen wirklichen Einsatzzweck, aber eine Art Chatbot zum testen klappt schonmal ^^.

                      Screenshot_20241214_190702_Chrome.jpg

                      Screenshot_20241214_190706_Telegram.jpg

                      1 Reply Last reply Reply Quote 1
                      • Negalein
                        Negalein Global Moderator @David G. last edited by

                        @david-g sagte in Bilder mittels LLM ChatGPT Vision ananalysieren:

                        Die Bilder werden mittels GPT Vision analysiert.

                        Hallo David!

                        Hab dein Blockly hier in der Sammlung aufgenommen. 🙂

                        1 Reply Last reply Reply Quote 2
                        • First post
                          Last post

                        Support us

                        ioBroker
                        Community Adapters
                        Donate

                        580
                        Online

                        31.7k
                        Users

                        79.8k
                        Topics

                        1.3m
                        Posts

                        5
                        17
                        1177
                        Loading More Posts
                        • Oldest to Newest
                        • Newest to Oldest
                        • Most Votes
                        Reply
                        • Reply as topic
                        Log in to reply
                        Community
                        Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen
                        The ioBroker Community 2014-2023
                        logo