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

    • Neuer Blog: Fotos und Eindrücke aus Solingen

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

    • ioBroker goes Matter ... Matter Adapter in Stable

    Bilder mittels LLM ChatGPT Vision ananalysieren

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

      @david-g

      1
      Wenn du es in den prompt reinschreibst dann kannst du ihn auch auf deutsch antworten lassen

      2
      Die Differenz ist wohl die Mehrwertsteuer

      3
      Ja Bild muss base64 kodiert werden. Beispiel ist ja mit enthalten.. Die Code Beispiele sind zwar alle in Python, können aber auch alle in Java Skript umgesetzt werden.
      so Übersetzung dann einfach wieder ChatGpt verwenden

      für eher was lokales kannst du mal hier schauen
      Das ist eine der bekanntesten Bibliotheken für Face and object recognition.
      Das funktioniert auch nur mit CPU und muss nicht unbedingt gleich eine Höllen-Grafikkarte
      mit verfügbar sein.
      https://github.com/opencv/opencv

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

        @oliverio

        Dann schaue ich am Wochenende mal, ob ich das in JS bekomme (mit ChatGPT, ich selber bin da eher unbeholfen...).

        Sonst melde ich mich nochmal.
        Falls jemand mit testen möchte, kann ich auch (persönlich dieser Person) zum testen den Api key geben.

        Kann mir ja hinterher einen neuen erstellen.

        Ich werde versuchen es in eine Blockly Funktion zu bekommen, in der ich das Bild als Pfad und die Frage übergeben kann.

        1 Reply Last reply Reply Quote 0
        • 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

                            806
                            Online

                            31.9k
                            Users

                            80.1k
                            Topics

                            1.3m
                            Posts

                            5
                            17
                            1423
                            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