Okay, I can help you set up a basic structure for an application that interacts with the Gemini API using the key you provided. **IMPORTANT SECURITY WARNING:** Hardcoding API keys directly into client-side JavaScript like this is **highly insecure**. Anyone viewing the page source can steal your key. For a real application, you should use a backend server to handle API calls or implement more secure methods for key management. Use this example for learning purposes only and invalidate the key if it's exposed. This setup will use the Gemini API to generate text based on your prompt, as the standard Gemini API generates text, not images directly. { "name": "gemini-text-app", "version": "1.0.0", "description": "Generate text using Gemini API", "main": "script.js", "scripts": { "start": "echo \"No start script needed for this simple example. Open index.html.\"" }, "dependencies": { "@google/generative-ai": "^0.14.1" }, "author": "", "license": "ISC" } Gemini Text Generator

Gemini Text Generator

Enter a prompt, and Gemini will generate a text description.

Warning: Using API keys directly in the browser is insecure. This is for demonstration only.

Generated Text:

body { font-family: sans-serif; line-height: 1.6; margin: 20px; background-color: #f4f4f4; } .container { background: #fff; padding: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); max-width: 600px; margin: auto; } h1 { text-align: center; color: #333; } p { text-align: center; color: #555; } p strong { color: red; } textarea { width: 95%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; min-height: 80px; display: block; margin-left: auto; margin-right: auto; } button { display: block; width: 100%; padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-bottom: 15px; } button:hover { background-color: #0056b3; } #loading { text-align: center; padding: 10px; color: #555; } #error { text-align: center; padding: 10px; color: red; background-color: #ffebeb; border: 1px solid red; border-radius: 4px; margin-bottom: 15px; } #output { margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px; } #output h2 { margin-bottom: 10px; color: #333; } #result-text { background-color: #e9e9e9; padding: 15px; border-radius: 4px; white-space: pre-wrap; /* Preserve line breaks */ word-wrap: break-word; /* Wrap long words */ min-height: 50px; } .hidden { display: none; } // IMPORTANT SECURITY WARNING: // Hardcoding API keys directly into client-side JavaScript is highly insecure. // Anyone viewing the page source can steal your key. // Use this for demonstration purposes ONLY. // Consider using a backend proxy or environment variables in a real application. const API_KEY = "AIzaSyAxC5bM5AiZQ50ALPDFVir2CZSUJrQo8hw"; // Use the key provided by the user // Ensure you have installed the package: npm install @google/generative-ai import { GoogleGenerativeAI } from "@google/generative-ai"; const promptInput = document.getElementById('prompt-input'); const generateButton = document.getElementById('generate-button'); const loadingIndicator = document.getElementById('loading'); const errorDisplay = document.getElementById('error'); const resultText = document.getElementById('result-text'); // Access your API key (see security warning above) const genAI = new GoogleGenerativeAI(API_KEY); async function generateText() { if (!promptInput.value) { showError("Please enter a prompt."); return; } showLoading(true); clearOutput(); showError(null); // Clear previous errors try { // For text-only input, use the gemini-pro model // Use "gemini-1.5-flash" as requested const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" }); const prompt = promptInput.value; const result = await model.generateContent(prompt); const response = await result.response; const text = response.text(); resultText.textContent = text; } catch (error) { console.error("Error generating text:", error); showError(`An error occurred: ${error.message}. Check the console for details. Ensure the API key is valid and has access to the Gemini API.`); } finally { showLoading(false); } } function showLoading(isLoading) { loadingIndicator.classList.toggle('hidden', !isLoading); generateButton.disabled = isLoading; } function showError(message) { if (message) { errorDisplay.textContent = message; errorDisplay.classList.remove('hidden'); } else { errorDisplay.classList.add('hidden'); errorDisplay.textContent = ''; } } function clearOutput() { resultText.textContent = ''; } generateButton.addEventListener('click', generateText); Next, you need to install the necessary dependency: bash npm install @google/generative-ai After the installation, open the `index.html` file in the preview. Enter a prompt and click the "Generate Text" button. The application will use the Gemini 1.5 Flash model to generate text based on your input. Remember the security warning about the API key.