AI: Gemini Bildgenerierung via html/javascript

**erich.wanker**

Hallo, ich wollte grad ein bisserl rumspielen - schaff es aber nicht ein AI Bild mit "gemini-1.5-flash" zu erstellen..

der Browser meldet 2 Fehler:
Failed to load resource: the server responded with a status of 404 ()Understand this errorAI
Fehler bei der API-Anfrage:

Die HTML-Seite schaut wie folgt aus:

markieren

Code:

			<!DOCTYPE html>

<html lang="de">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bildgenerator-Spielerei</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            margin: 20px;

        }

        #image {

            margin-top: 20px;

            max-width: 100%;

        }

    </style>

</head>

<body>

    <button onclick="generateImage()">Generieren</button>

    <img id="image" src="" alt="Generiertes Bild">

    <script>

        async function generateImage() {

            const apiKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

            try {

                const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-flash?key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`, {

                    mode: 'no-cors', method: 'POST',

                    headers: {

                        'Content-Type': 'application/json', 

                        'Authorization': `Bearer ${apiKey}`,

                        'key' : 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'

                    },

                    body: JSON.stringify({

                        prompt: "Testbild mit einer Sonneblume",

                        model: 'gemini-1.5-flash',

                        aspect_ratio: '16:9',

                        style: 'photorealistic'

                    }),

                });

                if (response.ok) {

                    const result = await response.json();

                    document.getElementById('image').src = result.image_url;

                } else {

                    console.error('Fehler bei der API-Anfrage:', response.statusText);

                }

            } catch (error) {

                console.error('Fehler bei der Bilderzeugung:', error);

            }

        }

    </script>

</body>

</html>

Mein Api-Schlüssel funktioniert.. wenn ich "händisch" im Browser die Adresse eingebe:

https://generativelanguage.googleapi...1.5-flash?key= xxxxxxxxxxxxxxxxxxxxxxx
bekomme ich:

markieren

Code:

			{

  "name": "models/gemini-1.5-flash",

  "version": "001",

  "displayName": "Gemini 1.5 Flash",

  "description": "Alias that points to the most recent stable version of Gemini 1.5 Flash, our fast and versatile multimodal model for scaling across diverse tasks.",

  "inputTokenLimit": 1000000,

  "outputTokenLimit": 8192,

  "supportedGenerationMethods": [

    "generateContent",

    "countTokens"

  ],

  "temperature": 1,

  "topP": 0.95,

  "topK": 40,

  "maxTemperature": 2

}

Hat wer eine Idee woran es liegen könnte?

LiGrü
Erich

**Bernhard Geyer**

Nutzt du hier TWebbrowser.
Immer mehr Webseiten werden nicht mehr mit diesen abgekündigten Browser laufen.

**Sinspin**

Verstehe ich das richtig dass du die Seite "Bildgenerator-Spielerei" bei dir lokal im Browser ausführst? So dass der Browser dann das generierte Bild nachlädt?
Wäre es nicht besser auf das ganze drumrum zu verzichten und den post via REST selber zu machen?
Die Bilder kommen meißt als B64 embedded zurück, das macht keinen Spass das selber aufzudrusseln, soweit kann ich verstehen dass du einen Browser bemühst.
Was passiert wenn du FF oder so mit den Script aufrufst?

**Phoenix**

Also Gemini 1.5 flash kann laut Google docs nur text generieren (

https://ai.google.dev/gemini-api/docs/models/gemini).

Dort steht:
Input(s): Audio, images, videos and text
Output: Text

Bei Gemini 2.0 Flash steht:
Inputs(s): Audio, images, videos and text
Output: Text, images (coming soon), and audio (coming soon)

Aber grundsätzlich, auch um text zu generieren:

Nehm erstmal den `Authorization` und den `key`-Header raus. Gemini will den Key wohl als Query-Parameter, und den dann nochmal mehrfach in den Headern mitschicken hilft nicht.

Zweitens sieht der Body falsch aus.
Das sollte in etwa so aussehen:

markieren

Code:

			{

  "contents": [{

    "parts": [{"text": "Write a story about a magic unicorn."}]

  }]

}

Da sollte nix mit Model, aspect ratio etc. drin stehen.

Schau Dir am besten mal die Gemini API Dokumentation im Detail an.

AI: Gemini Bildgenerierung via html/javascript

AI: Gemini Bildgenerierung via html/javascript

AW: AI: Gemini Bildgenerierung via html/javascript

AW: AI: Gemini Bildgenerierung via html/javascript

AW: AI: Gemini Bildgenerierung via html/javascript

Forumregeln

Bernhard Geyer Registriert seit: 13. Aug 2002 17.201 Beiträge Delphi 10.4 Sydney	#2 AW: AI: Gemini Bildgenerierung via html/javascript 17. Dez 2024, 08:09 Nutzt du hier TWebbrowser. Immer mehr Webseiten werden nicht mehr mit diesen abgekündigten Browser laufen. Windows Vista - Eine neue Erfahrung in Fehlern.
	Zitat