Bilder mittels LLM ChatGPT Vision ananalysieren

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.

@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.

David G.

@oliverio

Habe schonmal einen Anfang:

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

@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.

@oliverio

Hier mein fertiges Blockly für interessierte:

<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.

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

@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.

@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

@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.

@paul53

Das ist ja "doof".

Bleibt also nur ein normales JS?

paul53

@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.

@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 ^^.

Negalein

@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. :)

Community Forum

NEWS

Bilder mittels LLM ChatGPT Vision ananalysieren

Support us

409

32.4k

81.5k

1.3m