First experiment with Gemini Nano in Chrome

ToonTalk · May 31, 2024 · 411fbdc · 411fbdc
1 parent 5699148
commit 411fbdc
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 0 deletions.
diff --git a/apps/Gemini Nano/chat.js b/apps/Gemini Nano/chat.js
@@ -0,0 +1,51 @@
+// chat.js
+let conversationHistory = []; // Continue using the renamed array to avoid conflicts
+
+document.getElementById('send-button').addEventListener('click', sendMessage);
+document.getElementById('user-input').addEventListener('keypress', function(event) {
+    if (event.key === "Enter") {
+        event.preventDefault(); // Prevent the default action to avoid form submission
+        sendMessage();
+    }
+});
+
+async function sendMessage() {
+    const userInput = document.getElementById('user-input').value;
+    const chatOutput = document.getElementById('chat-output');
+    const sendButton = document.getElementById('send-button');
+
+    if (!userInput.trim()) return;
+
+    sendButton.disabled = true; // Disable the button to prevent re-entry during processing
+    chatOutput.innerHTML += `<div>You: ${userInput}</div>`;
+    conversationHistory.push(`You: ${userInput}<ctrl23>`); // Update conversation history
+    console.log('Sending prompt:', `You: ${userInput}<ctrl23>`); // Log the prompt
+
+    const canCreate = await window.ai.canCreateTextSession();
+    if (canCreate === "no") {
+        chatOutput.innerHTML += `<div>Sorry, your device does not support this feature.</div>`;
+        sendButton.disabled = false;
+        return;
+    }
+
+    const session = await window.ai.createTextSession();
+    let prompt = conversationHistory.join(' ');
+    if (prompt.length > 950) {
+        conversationHistory = conversationHistory.slice(-5);
+        prompt = conversationHistory.join(' ');
+    }
+
+    console.log('Full prompt to AI:', prompt); // Log the full prompt being sent to AI
+    try {
+        const result = await session.prompt(prompt);
+        chatOutput.innerHTML += `<div>Gemini Nano:</div><div>${marked.parse(result)}</div>`;
+        conversationHistory.push(`Gemini Nano: ${result}<ctrl23>`);
+        console.log('Received response:', result); // Log the response from AI
+    } catch (error) {
+        console.error('Error prompting Gemini Nano:', error);
+        chatOutput.innerHTML += `<div>Error communicating with AI.</div>`;
+    }
+
+    document.getElementById('user-input').value = '';
+    sendButton.disabled = false;
+}
diff --git a/apps/Gemini Nano/index.html b/apps/Gemini Nano/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gemini Nano Chat</title>
+    <link rel="stylesheet" href="styles.css">
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+</head>
+<body>
+    <div class="chat-container">
+        <div id="chat-output"></div>
+        <div class="input-container"> <!-- Ensures proper alignment -->
+            <input type="text" id="user-input" placeholder="Type your message here...">
+            <button id="send-button">Send</button>
+        </div>
+    </div>
+    <script src="chat.js"></script>
+</body>
+</html>
diff --git a/apps/Gemini Nano/styles.css b/apps/Gemini Nano/styles.css
@@ -0,0 +1,72 @@
+/* styles.css */
+body, html {
+    height: 100%;
+    margin: 0;
+    font-family: Arial, sans-serif;
+}
+
+.chat-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#chat-output {
+    flex-grow: 1;
+    padding: 10px;
+    border: 1px solid #ccc;
+    overflow-y: auto;
+    overflow-x: hidden; /* Prevent horizontal overflow */
+}
+
+pre, code {
+    background-color: #f4f4f4;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 5px; /* Reduced padding */
+    margin: 0; /* No margin */
+    white-space: pre-wrap; /* Wrap as needed */
+    word-wrap: break-word; /* Allow long words to break and wrap */
+    font-family: 'Courier New', Courier, monospace;
+    font-size: 0.9em; /* Smaller font size */
+}
+
+strong {
+    font-weight: bold;
+}
+
+em {
+    font-style: italic;
+}
+
+#send-button:hover {
+    background-color: #45a049; /* Slightly darker green on hover */
+}
+
+#user-input {
+    flex-grow: 1; /* Allows it to take up remaining space */
+    margin: 0 5px 0 0; /* Proper margins, no bottom margin */
+    padding: 10px; /* Consistent padding */
+    border: 2px solid #ddd;
+    border-radius: 4px;
+}
+
+#send-button {
+    padding: 5px 10px; /* Smaller padding */
+    font-size: 0.8em; /* Appropriate font size */
+    background-color: #4CAF50; /* Stylish green background */
+    color: white; /* White text for visibility */
+    border: none; /* Smooth edges with no border */
+    border-radius: 4px; /* Rounded corners for aesthetics */
+    cursor: pointer; /* Cursor indicates button */
+    transition: background-color 0.3s; /* Smooth color transition on hover */
+    display: inline-block; /* Only as wide as its content */
+}
+
+.input-container {
+    display: flex; /* Uses flexbox to layout children inline */
+    align-items: center; /* Aligns items vertically in the center */
+    padding: 10px; /* Padding around the input area */
+}
+
+