diff --git a/apps/Gemini Nano/chat.js b/apps/Gemini Nano/chat.js new file mode 100644 index 0000000..eabb24f --- /dev/null +++ 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 += `
You: ${userInput}
`; + conversationHistory.push(`You: ${userInput}`); // Update conversation history + console.log('Sending prompt:', `You: ${userInput}`); // Log the prompt + + const canCreate = await window.ai.canCreateTextSession(); + if (canCreate === "no") { + chatOutput.innerHTML += `
Sorry, your device does not support this feature.
`; + 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 += `
Gemini Nano:
${marked.parse(result)}
`; + conversationHistory.push(`Gemini Nano: ${result}`); + console.log('Received response:', result); // Log the response from AI + } catch (error) { + console.error('Error prompting Gemini Nano:', error); + chatOutput.innerHTML += `
Error communicating with AI.
`; + } + + document.getElementById('user-input').value = ''; + sendButton.disabled = false; +} diff --git a/apps/Gemini Nano/index.html b/apps/Gemini Nano/index.html new file mode 100644 index 0000000..0a8d498 --- /dev/null +++ b/apps/Gemini Nano/index.html @@ -0,0 +1,20 @@ + + + + + + Gemini Nano Chat + + + + +
+
+
+ + +
+
+ + + diff --git a/apps/Gemini Nano/styles.css b/apps/Gemini Nano/styles.css new file mode 100644 index 0000000..e07afa6 --- /dev/null +++ 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 */ +} + +