|
1 | 1 | Single HTML file to interface with google's gemini models including the latest gemini pro 2.5. |
2 | 2 | SImply open the page in a web browser, enter your key, select a model, and begin chatting. |
3 | | - |
4 | | - |
5 | | - |
6 | 3 | This should work on any operating system with a modern web browser. |
7 | | -Contributions are welcome, the initial version was written by gemini pro 2.5 03-35. |
8 | | - |
9 | | -# Key features : streaming chat, code blocks that you can copy or download, light and dark themes, chat history, source code highlighting, and file uploads. |
10 | | - |
11 | | -Go to relases, download gemini.zip, open it, and open gemini.html in a web browser. |
12 | | - |
13 | | -# GeminiHTML - User Guide |
14 | | - |
15 | | -Welcome to GeminiHTML! This guide explains how to use this web interface to interact with Google's Gemini AI models. |
16 | | - |
17 | | -**What is GeminiHTML?** |
18 | | -GeminiHTML is a self-contained web application that runs entirely in your browser. It allows you to chat with Google Gemini models, upload files for analysis (with compatible models), configure generation parameters, and view the conversation history. It requires your own Google AI Studio API Key to function. |
19 | | - |
20 | | ---- |
21 | | - |
22 | | -## 1. Getting Started |
23 | | - |
24 | | -1. **Open the App:** Open the `GeminiHTML.html` file in your web browser (like Chrome, Firefox, Edge, Safari). |
25 | | -2. **Enter API Key:** |
26 | | - * Locate the **API Key** field at the top. |
27 | | - * Enter your **Google AI Studio API Key**. Get one from [ai.google.dev](https://ai.google.dev/). |
28 | | - * **(Optional)** Check **Remember Key** to save the key in your browser's local storage for future use. *Use with caution, especially on shared computers.* |
29 | | -3. **Select Model:** |
30 | | - * Once a valid API key is entered, the **Select Model** dropdown will automatically load available Gemini models compatible with this app. |
31 | | - * Choose a model. Models marked `(Multimodal)` or `1.5 Pro` are recommended if you plan to upload files. The currently selected model is shown in the footer. |
32 | | - |
33 | | ---- |
34 | 4 |
|
35 | | -## 2. Core Features |
36 | 5 |
|
37 | | -* **Sending Messages:** |
38 | | - * Type your message or prompt into the **Your Message** text area at the bottom. |
39 | | - * Click the **Send** button or press `Ctrl+Enter` (or `Cmd+Enter` on Mac). |
| 6 | + |
40 | 7 |
|
41 | | -* **Uploading Files (for Multimodal Models):** |
42 | | - * Click the **Upload File** button. |
43 | | - * Select an image, PDF, audio, video, or text file from your device. |
44 | | - * The selected filename will appear next to the button (e.g., `Selected: my_image.jpg`). |
45 | | - * You can optionally add text in the **Your Message** box to provide context or ask questions about the file. |
46 | | - * Click **Send**. The file data will be sent along with your text (if any) to the selected model. |
47 | | - * *Note:* File uploads work best with models like `gemini-1.5-pro-latest`. Performance with other models may vary or fail. |
| 8 | +Contributions are welcome |
48 | 9 |
|
49 | | -* **Viewing Conversation:** |
50 | | - * Your messages appear as blue bubbles (`user-bubble`) on the right. |
51 | | - * The AI's responses appear as grey bubbles (`model-bubble`) on the left. |
52 | | - * Responses are streamed in real-time. A blinking cursor (`▌`) indicates the model is generating. |
53 | | - * Model responses are formatted using Markdown (headings, lists, bold, italics, etc.). |
54 | | - |
55 | | -* **Interacting with Code Blocks:** |
56 | | - * If the model provides code, it will appear in a formatted block. |
57 | | - * Hover over the top-right corner of the code block to reveal buttons: |
58 | | - * **Copy:** Click to copy the code to your clipboard. |
59 | | - * **Save:** Click to download the code block as a file (e.g., `code_block.py`). |
60 | | - |
61 | | -* **Configuration Options:** |
62 | | - * Click on **Configuration Options** to expand the settings panel. |
63 | | - * Adjust parameters to influence the model's output: |
64 | | - * **Temperature:** Controls randomness (0 = deterministic, 1 = max randomness). |
65 | | - * **Max Output Tokens:** Limits the length of the model's response. |
66 | | - * **Top P / Top K:** Advanced sampling parameters (usually leave at defaults unless you know what they do). |
67 | | - |
68 | | -* **Theme Switching:** |
69 | | - * Click the **Dark** / **Light** button in the top-right header to toggle the interface theme. |
70 | | - |
71 | | -* **Clearing the Chat:** |
72 | | - * Click the **Clear Chat** button to remove the entire conversation history from the screen and memory. |
73 | | - |
74 | | ---- |
75 | | - |
76 | | -## 3. Status & Errors |
77 | | - |
78 | | -* The area below the chat history (`#status`) displays information: |
79 | | - * **Loading indicators:** Show when models are loading or a response is generating. |
80 | | - * **Success messages:** Confirm actions like model loading or response completion (including token usage). |
81 | | - * **Warnings (Yellow):** Indicate potential issues (e.g., response cut off by `MAX_TOKENS`, safety blocks, using non-multimodal model with files). |
82 | | - * **Errors (Red):** Show critical problems (e.g., Invalid API Key, network errors, file read errors, blocked prompts). Check the message for details. |
83 | | - |
84 | | ---- |
85 | | - |
86 | | -## 4. Important Notes |
87 | | - |
88 | | -* **Local Execution:** This app runs entirely in *your* browser. Your API key and conversation data are *not* sent to any server other than the official Google AI API endpoint. |
89 | | -* **API Key Security:** Be mindful when using the "Remember Key" feature, as the key is stored unencrypted in your browser's local storage. |
90 | | -* **File Limits:** While the app has a ~50MB example limit for reading files, the actual limits depend on the specific Gemini model and the API itself. Large files may take time to process or exceed API limits. |
91 | | -* **Troubleshooting:** If you encounter issues: |
92 | | - * Check the **Status** area for error messages. |
93 | | - * Verify your **API Key** is correct and has permissions. |
94 | | - * Open your browser's **Developer Console** (usually F12) to look for more detailed error messages. |
| 10 | +# Key features : streaming chat, code blocks that you can copy or download, light and dark themes, chat history, source code highlighting, and file uploads. |
95 | 11 |
|
96 | | ---- |
| 12 | +Go to relases, download gemini.zip, open it, and open gemini.html in a web browser. |
97 | 13 |
|
98 | | -*Thank you for using GeminiHTML!* |
0 commit comments