Gemini Pro Chat App

Below is an all-in-one HTML file that meets the requirements. (Be sure to replace the Gemini Pro API endpoint and adjust the payload as needed for your production use.)

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Gemini Pro Chat</title>
  <!-- Marked.js for Markdown rendering -->
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <!-- Highlight.js for code block syntax highlighting -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  <style>
    /* Reset margins and set full height */
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: Arial, sans-serif;
    }
    /* Flex container for the entire app */
    #container {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    /* Minimal controls container (you may later hide this via a toggle if desired) */
    #controls {
      background: #f0f0f0;
      padding: 5px 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      font-size: 0.9em;
    }
    /* The message display area fills available space */
    #messageDisplay {
      flex: 1;
      overflow-y: auto;
      padding: 10px;
      background: #fff;
    }
    /* Input area at the bottom */
    #inputArea {
      display: flex;
      padding: 5px;
      background: #f9f9f9;
      border-top: 1px solid #ccc;
    }
    #inputArea textarea {
      flex: 1;
      resize: vertical;
      padding: 5px;
      font-size: 1em;
    }
    #inputArea button {
      margin-left: 5px;
      padding: 5px 10px;
      font-size: 1em;
    }
    /* Message styling */
    .message {
      margin-bottom: 15px;
    }
    .assistant {
      background: #e7f3fe;
      padding: 10px;
      border-radius: 5px;
      white-space: pre-wrap;
    }
    .user {
      background: #e2e2e2;
      padding: 10px;
      border-radius: 5px;
      white-space: pre-wrap;
      text-align: right;
    }
  </style>
</head>
<body>
  <div id="container">
    <!-- Control/config panel (small height so that most of the screen is free for messages) -->
    <div id="controls">
      <label>
        Gemini API Key:
        <input type="password" id="geminiKeyInput" placeholder="Enter your Gemini API key">
      </label>
      <button id="saveKeyButton">Save Key</button>
      
      <label>
        Token Threshold:
        <input type="number" id="tokenThresholdInput" placeholder="Token threshold">
      </label>
      <button id="clearHistoryButton">Clear History</button>
      
      <label>
        <input type="checkbox" id="enableTranslation" checked>
        Enable Translation
      </label>
      <label>
        Translate to:
        <select id="languageSelect">
          <option value="zh-CN" selected>Simplified Chinese</option>
          <option value="zh-TW">Traditional Chinese</option>
          <option value="ja">Japanese</option>
          <option value="en">English</option>
          <option value="es">Spanish</option>
        </select>
      </label>
    </div>

    <!-- Message display area -->
    <div id="messageDisplay"></div>

    <!-- Input area (always visible) -->
    <div id="inputArea">
      <textarea id="userInput" rows="3" placeholder="Type your message here..."></textarea>
      <button id="sendButton">Send</button>
    </div>
  </div>

  <script>
    // Local storage keys
    const STORAGE_KEY = 'conversationHistory';
    const GEMINI_KEY_STORAGE = 'geminiKey';
    const TOKEN_THRESHOLD_STORAGE = 'tokenThreshold';

    // DOM elements
    const geminiKeyInput = document.getElementById('geminiKeyInput');
    const tokenThresholdInput = document.getElementById('tokenThresholdInput');
    const messageDisplay = document.getElementById('messageDisplay');
    const userInput = document.getElementById('userInput');
    const enableTranslation = document.getElementById('enableTranslation');
    const languageSelect = document.getElementById('languageSelect');

    // Load Gemini API key from local storage if it exists
    if (localStorage.getItem(GEMINI_KEY_STORAGE)) {
      geminiKeyInput.value = localStorage.getItem(GEMINI_KEY_STORAGE);
    }

    // Load token threshold if set previously
    if (localStorage.getItem(TOKEN_THRESHOLD_STORAGE)) {
      tokenThresholdInput.value = localStorage.getItem(TOKEN_THRESHOLD_STORAGE);
    }

    // Load conversation history from local storage
    let conversationHistory = [];
    if (localStorage.getItem(STORAGE_KEY)) {
      conversationHistory = JSON.parse(localStorage.getItem(STORAGE_KEY));
      conversationHistory.forEach(displayMessage);
    }

    // Save API key to local storage
    document.getElementById('saveKeyButton').addEventListener('click', () => {
      localStorage.setItem(GEMINI_KEY_STORAGE, geminiKeyInput.value.trim());
      alert('Gemini API Key saved.');
    });

    // Save token threshold to local storage when changed
    tokenThresholdInput.addEventListener('change', () => {
      localStorage.setItem(TOKEN_THRESHOLD_STORAGE, tokenThresholdInput.value);
    });

    // Clear conversation history (and thus the context) when requested
    document.getElementById('clearHistoryButton').addEventListener('click', () => {
      if (confirm('Clear conversation history? This will reset the context for Gemini.')) {
        conversationHistory = [];
        localStorage.removeItem(STORAGE_KEY);
        messageDisplay.innerHTML = '';
      }
    });

    // Send message to Gemini Pro API when the send button is clicked
    document.getElementById('sendButton').addEventListener('click', async () => {
      const messageContent = userInput.value.trim();
      if (!messageContent) return;

      // Create and display the user's message
      const userMessage = { role: 'user', content: messageContent };
      conversationHistory.push(userMessage);
      saveHistory();
      displayMessage(userMessage);
      userInput.value = '';

      // Get the saved Gemini API key
      const geminiKey = geminiKeyInput.value.trim();
      if (!geminiKey) {
        alert('Please enter your Gemini API key.');
        return;
      }

      // Build the payload for Gemini Pro API.
      // Adjust this payload structure to match the actual API.
      const payload = {
        conversation: conversationHistory
      };

      try {
        // Replace the endpoint URL with your actual Gemini Pro API endpoint
        const response = await fetch('https://gemini.googleapis.com/v1/chat:complete', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + geminiKey
          },
          body: JSON.stringify(payload)
        });
        if (!response.ok) {
          throw new Error('API request failed with status ' + response.status);
        }
        const data = await response.json();

        // Assume the response includes an "answer" and a "metadata" field containing token usage.
        const assistantMessage = { 
          role: 'assistant', 
          content: data.answer, 
          metadata: data.metadata 
        };
        conversationHistory.push(assistantMessage);
        saveHistory();
        displayMessage(assistantMessage);

        // Check token usage threshold
        const threshold = parseInt(tokenThresholdInput.value);
        if (threshold && data.metadata && data.metadata.total_tokens > threshold) {
          alert(`Token usage (${data.metadata.total_tokens}) exceeds the threshold of ${threshold}.`);
        }

        // If translation is enabled, translate the Gemini answer and display the translated text
        if (enableTranslation.checked) {
          const translatedText = await translateText(data.answer, languageSelect.value);
          if (translatedText) {
            // Here we prepend a header to denote that this is a translation.
            const translationMessage = { 
              role: 'assistant', 
              content: '**Translation:**\n\n' + translatedText 
            };
            // Optionally, you can also store the translation in conversationHistory.
            displayMessage(translationMessage);
          }
        }
      } catch (error) {
        console.error(error);
        alert('Error: ' + error.message);
      }
    });

    // Save the conversation history to local storage
    function saveHistory() {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(conversationHistory));
    }

    // Display a message using marked.js for Markdown and highlight.js for code blocks
    function displayMessage(message) {
      const messageDiv = document.createElement('div');
      messageDiv.classList.add('message', message.role);
      messageDiv.innerHTML = marked.parse(message.content);
      messageDisplay.appendChild(messageDiv);

      // Automatically highlight any code blocks inside the message
      messageDiv.querySelectorAll('pre code').forEach((block) => {
        hljs.highlightElement(block);
      });
      // Scroll to the bottom of the message display
      messageDisplay.scrollTop = messageDisplay.scrollHeight;
    }

    // Translate text using the free Google Translate API
    async function translateText(text, targetLang) {
      try {
        const encodedText = encodeURIComponent(text);
        const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=auto&tl=${targetLang}&dt=t&q=${encodedText}`;
        const res = await fetch(url);
        if (!res.ok) {
          throw new Error('Translation API error: ' + res.status);
        }
        const result = await res.json();
        // The result is a nested array; join the segments to form the translated text.
        let translated = '';
        result[0].forEach(segment => {
          if (segment[0]) {
            translated += segment[0];
          }
        });
        return translated;
      } catch (error) {
        console.error('Translation error:', error);
        return null;
      }
    }
  </script>
</body>
</html>

How This App Works

Gemini API Key & Conversation History:
The API key is entered and saved in local storage. Conversation history is maintained (and can be cleared with a button) so that Gemini can use previous messages for context.
Token Threshold:
You can set a token usage threshold. When a Gemini response returns, its metadata is checked and an alert is shown if the total token usage exceeds your threshold.
Markdown & Code Highlighting:
The Gemini responses (and their translations) are rendered with marked.js so that Markdown is processed. Code blocks are auto-detected and highlighted using highlight.js.
Translation Feature:
When enabled, the Gemini response is sent to the free Google Translate API, and the translated text (in your chosen language) is appended below the original answer.
Layout:
The message display area uses most of the window while the controls (API key, threshold, clear history, translation options) take up minimal space at the top, and the send button (with a multi‑line textarea) stays fixed at the bottom.

Simply open this HTML file in your browser, set your API key and other options, and start chatting!

Note: The Gemini Pro API endpoint and payload may need to be adjusted for your actual API usage.

交談歷程

今天

昨天

過去 7 天

過去 30 天

1月

2024年

How This App Works

交談歷程

你說：

How This App Works