CrowlKit - OpenAI Vision

Uitleg nog niet volledig beschikbaar.

Libraries toevoegen

Zorg dat de onderstaande libaries aanwezig zijn in de head van je pagina/app:

<script src="https://cdn.publihub.media/lib/crowl.media.js"></script>
<script src="https://cdn.publihub.media/lib/crowl.openaivision.js"></script>
<script src="https://cdn.publihub.media/lib/app.js"></script>
<link rel="stylesheet" href="https://cdn.publihub.media/css/app.css">

Herkenningselement toevoegen

Voeg het volgende element toe aan je app:

<app-part id="feedback"></app-part>
<app-image-recognition key="jouw api-key" id="mir" type="webcam" question="Wat zie je op deze afbeelding?" target="feedback"></app-image-recognition>   

Een app-image-recognition-element vraagt de volgende attributen:

  • id: een uniek id, noodzakelijk!
  • key: Jouw api-key
  • type: Je kan kiezen uit "webcam", "url" of "upload".
  • question: De vraag die je over de afbeelding wil stellen.
  • target: Het id van het element waarin je het antwoord van ChatGPT wil tonen.

De vraag wijzigen

Je kan de vraag in het attribuut wijzigen, maar je kan de vraag ook in "real time" wijzigen. In het onderstaande voorbeeld voegen we een invoerelement voor tekst toe:

<input-text label="Wijzig de vraag" id="qc" value=""></input-text>

In app-ready kan je nu de benodigde code invoeren. We zorgen ervoor dat bij het wijzigen van de vraag, die wordt doorgegeven aan het app-image-recognition-element:

id("qc").after("change").do(function(){
   var nieuwevraag = id("qc").value;
   id("mir").changeFeature("question", nieuwevraag);
});
Volgende pagina