Care for your own

Our approach uniquely integrates Digital IDs with advanced AI models to tackle socio-economic challenges

Comment

posted an update —

Here is my full FE code (<!DOCTYPE html> AI Personal Assistant body { font-family: &#39;Segoe UI&#39;, Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 20px; background-color: #f4f4f9; color: #333; transition: background-color 0.3s ease; } body.dark-mode { background-color: #1e1e1e; color: #f4f4f9; } h1 { color: #2c3e50; text-align: center; margin-bottom: 20px; } .container { max-width: 800px; margin: 0 auto; background: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease; } body.dark-mode .container { background: #2c3e50; color: #f4f4f9; } #conversation, #chat-box { border: 1px solid #ddd; padding: 15px; margin-bottom: 20px; height: 300px; overflow-y: auto; background-color: #fafafa; border-radius: 8px; transition: background-color 0.3s ease; } body.dark-mode #conversation, body.dark-mode #chat-box { background-color: #34495e; border-color: #444; } .message { margin-bottom: 10px; padding: 10px; border-radius: 8px; animation: fadeIn 0.3s ease-in-out; } .user-message { background-color: #e3f2fd; margin-left: 20%; text-align: right; } body.dark-mode .user-message { background-color: #1c3f60; } .bot-message { background-color: #f5f5f5; margin-right: 20%; } body.dark-mode .bot-message { background-color: #3b536b; } .chat-message { background-color: #e8f5e9; margin-left: 20%; text-align: right; } body.dark-mode .chat-message { background-color: #2e7d32; } .message button { margin-left: 10px; background: #007bff; color: white; border: none; padding: 5px 10px; border-radius: 4px; cursor: pointer; transition: background 0.3s ease; } .message button:hover { background: #0056b3; } #input-area, #chat-input-area { margin-bottom: 20px; } textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; resize: vertical; min-height: 100px; transition: background-color 0.3s ease, border-color 0.3s ease; } body.dark-mode textarea { background-color: #34495e; border-color: #444; color: #f4f4f9; } button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; transition: background 0.3s ease; } button:hover { background: #0056b3; } .voice-customization, #tone-adjustment, #voice-selection, #analysis, #conversation-analysis, #ocr-section { margin-bottom: 20px; } .voice-customization label, #tone-adjustment label, #voice-selection label { display: block; margin-bottom: 5px; font-weight: bold; } .voice-customization input[type=&quot;range&quot;], select { width: 100%; } .voice-customization span { display: inline-block; margin-left: 10px; font-size: 14px; color: #555; } #tone-adjusted-message, #recommendations, #conversation-analysis-result, #extracted-text { margin-top: 10px; padding: 10px; background: #f1f1f1; border-radius: 8px; } .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #007bff; border-radius: 50%; animation: spin 1s linear infinite; margin-left: 10px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .dark-mode-toggle { position: fixed; top: 20px; right: 20px; background: #007bff; color: white; border: none; padding: 10px; border-radius: 50%; cursor: pointer; transition: background 0.3s ease; } .dark-mode-toggle:hover { background: #0056b3; }

AI Personal Assistant

Enter your message:

Send Clear Conversation

Voice Customization

Pitch: 0% Rate: 1.0 Preview Voice Select tone: Professional Friendly Casual Adjust Tone Select voice: Zulu - Thando Afrikaans - Adri British English - Ryan US English - Jenny Australian English - Natasha

Analysis

Analyze Conversation

Conversation Analysis

Paste email or conversation:

Analyze

Extract Text from Image


Extract Text

Chat with Others


Send $(document).ready(function() { let conversationHistory = []; let chatMessages = [];</p> <pre class="language-nolang"><code> function toggleDarkMode() { $(&#39;body&#39;).toggleClass(&#39;dark-mode&#39;); const isDarkMode = $(&#39;body&#39;).hasClass(&#39;dark-mode&#39;); localStorage.setItem(&#39;darkMode&#39;, isDarkMode); $(&#39;.dark-mode-toggle i&#39;).toggleClass(&#39;fa-moon fa-sun&#39;); } if (localStorage.getItem(&#39;darkMode&#39;) === &#39;true&#39;) { toggleDarkMode(); } $(&#39;#send-button&#39;).click(function() { const userInput = $(&#39;#user-input&#39;).val().trim(); if (!userInput) return; $(&#39;#send-button&#39;).html(&#39;Sending... &lt;div class=&quot;loading&quot;&gt;&lt;/div&gt;&#39;); $.ajax({ type: &#39;POST&#39;, url: &#39;/generate&#39;, contentType: &#39;application/json&#39;, data: JSON.stringify({ input: userInput }), success: function(data) { conversationHistory.push({ type: &quot;User&quot;, text: userInput }); conversationHistory.push({ type: &quot;Bot&quot;, text: data.response }); updateConversationDisplay(); $(&#39;#user-input&#39;).val(&#39;&#39;); $(&#39;#send-button&#39;).html(&#39;Send&#39;); }, error: function() { alert(&#39;Failed to send message. Please try again.&#39;); $(&#39;#send-button&#39;).html(&#39;Send&#39;); } }); }); $(&#39;#clear-button&#39;).click(function() { conversationHistory = []; updateConversationDisplay(); }); $(&#39;#preview-voice-button&#39;).click(function() { const previewText = &quot;This is a preview of the current voice settings.&quot;; const selectedVoiceName = $(&#39;#voice&#39;).val(); const pitch = $(&#39;#pitch&#39;).val() + &quot;%&quot;; const rate = $(&#39;#rate&#39;).val(); $.ajax({ type: &#39;POST&#39;, url: &#39;/synthesize&#39;, contentType: &#39;application/json&#39;, data: JSON.stringify({ text: previewText, voice_name: selectedVoiceName, pitch: pitch, rate: rate }), success: function(data) { new Audio(&#39;/audio/&#39; + data.audio_file).play().catch(() =&gt; alert(&#39;Failed to play audio.&#39;)); }, error: function() { alert(&#39;Speech synthesis failed. Please try again.&#39;); } }); }); $(&#39;#adjust-tone-button&#39;).click(function() { const message = $(&#39;#user-input&#39;).val().trim(); const tone = $(&#39;#tone&#39;).val(); if (!message) return; $(&#39;#adjust-tone-button&#39;).html(&#39;Adjusting... &lt;div class=&quot;loading&quot;&gt;&lt;/div&gt;&#39;); $.ajax({ type: &#39;POST&#39;, url: &#39;/tone&#39;, contentType: &#39;application/json&#39;, data: JSON.stringify({ message: message, tone: tone }), success: function(data) { $(&#39;#tone-adjusted-message&#39;).html(`&lt;strong&gt;Adjusted Message:&lt;/strong&gt; ${data.adjusted_message}`); $(&#39;#adjust-tone-button&#39;).html(&#39;Adjust Tone&#39;); }, error: function() { alert(&#39;Failed to adjust tone. Please try again.&#39;); $(&#39;#adjust-tone-button&#39;).html(&#39;Adjust Tone&#39;); } }); }); $(&#39;#analyze-button&#39;).click(function() { const conversationText = conversationHistory.map(item =&gt; `${item.type}: ${item.text}`).join(&#39;\n&#39;); if (!conversationText) return; $(&#39;#analyze-button&#39;).html(&#39;Analyzing... &lt;div class=&quot;loading&quot;&gt;&lt;/div&gt;&#39;); $.ajax({ type: &#39;POST&#39;, url: &#39;/analyze&#39;, contentType: &#39;application/json&#39;, data: JSON.stringify({ conversation: conversationText }), success: function(data) { $(&#39;#recommendations&#39;).html(`&lt;strong&gt;Recommendations:&lt;/strong&gt;&lt;br&gt;${data.recommendations.replace(/\n/g, &#39;&lt;br&gt;&#39;)}`); $(&#39;#analyze-button&#39;).html(&#39;Analyze Conversation&#39;); }, error: function() { alert(&#39;Failed to analyze conversation. Please try again.&#39;); $(&#39;#analyze-button&#39;).html(&#39;Analyze Conversation&#39;); } }); }); $(&#39;#analyze-conversation-button&#39;).click(function() { const conversationText = $(&#39;#analysis-input&#39;).val().trim(); if (!conversationText) return; $(&#39;#analyze-conversation-button&#39;).html(&#39;Analyzing... &lt;div class=&quot;loading&quot;&gt;&lt;/div&gt;&#39;); $.ajax({ type: &#39;POST&#39;, url: &#39;/analyze_conversation&#39;, contentType: &#39;application/json&#39;, data: JSON.stringify({ conversation_text: conversationText }), success: function(data) { $(&#39;#conversation-analysis-result&#39;).html(`&lt;strong&gt;Analysis:&lt;/strong&gt;&lt;br&gt;${data.analysis}`); $(&#39;#analyze-conversation-button&#39;).html(&#39;Analyze&#39;); }, error: function() { alert(&#39;Failed to analyze conversation. Please try again.&#39;); $(&#39;#analyze-conversation-button&#39;).html(&#39;Analyze&#39;); } }); }); $(&#39;#extract-text-button&#39;).click(function() { const fileInput = $(&#39;#image-upload&#39;)[0]; if (!fileInput.files.length) { alert(&#39;Please select an image file.&#39;); return; } const formData = new FormData(); formData.append(&#39;image&#39;, fileInput.files[0]); $(&#39;#extract-text-button&#39;).html(&#39;Extracting... &lt;div class=&quot;loading&quot;&gt;&lt;/div&gt;&#39;); $.ajax({ type: &#39;POST&#39;, url: &#39;/extract_text&#39;, data: formData, processData: false, contentType: false, success: function(data) { $(&#39;#extracted-text&#39;).html(`&lt;strong&gt;Extracted Text:&lt;/strong&gt;&lt;br&gt;${data.extracted_text.replace(/\n/g, &#39;&lt;br&gt;&#39;)}`); $(&#39;#extract-text-button&#39;).html(&#39;Extract Text&#39;); }, error: function() { alert(&#39;Failed to extract text. Please try again.&#39;); $(&#39;#extract-text-button&#39;).html(&#39;Extract Text&#39;); } }); }); $(&#39;#send-chat-button&#39;).click(function() { const username = $(&#39;#username&#39;).val().trim() || &#39;Anonymous&#39;; const message = $(&#39;#chat-input&#39;).val().trim(); if (!message) return; $(&#39;#send-chat-button&#39;).html(&#39;Sending... &lt;div class=&quot;loading&quot;&gt;&lt;/div&gt;&#39;); $.ajax({ type: &#39;POST&#39;, url: &#39;/send_message&#39;, contentType: &#39;application/json&#39;, data: JSON.stringify({ username: username, message: message }), success: function(data) { if (data.status === &#39;Message sent successfully&#39;) { $(&#39;#chat-input&#39;).val(&#39;&#39;); fetchChatMessages(); } $(&#39;#send-chat-button&#39;).html(&#39;Send&#39;); }, error: function() { alert(&#39;Failed to send message. Please try again.&#39;); $(&#39;#send-chat-button&#39;).html(&#39;Send&#39;); } }); }); function fetchChatMessages() { $.ajax({ type: &#39;GET&#39;, url: &#39;/get_messages&#39;, success: function(data) { chatMessages = data.messages; updateChatDisplay(); }, error: function() { alert(&#39;Failed to fetch chat messages. Please try again.&#39;); } }); } function updateConversationDisplay() { $(&#39;#conversation&#39;).html(conversationHistory.map((item, index) =&gt; ` &lt;div class=&quot;message ${item.type === &quot;User&quot; ? &quot;user-message&quot; : &quot;bot-message&quot;}&quot;&gt; ${item.text} &lt;button onclick=&quot;playTextToSpeech(${index})&quot;&gt;Listen&lt;/button&gt; &lt;button onclick=&quot;copyToClipboard(&#39;${item.text}&#39;)&quot;&gt;Copy to Clipboard&lt;/button&gt; &lt;/div&gt; `).join(&#39;&#39;)).scrollTop($(&#39;#conversation&#39;)[0].scrollHeight); } function updateChatDisplay() { $(&#39;#chat-box&#39;).html(chatMessages.map(msg =&gt; ` &lt;div class=&quot;message chat-message&quot;&gt; &lt;strong&gt;${msg.username}:&lt;/strong&gt; ${msg.message} &lt;em&gt;(${msg.timestamp})&lt;/em&gt; &lt;/div&gt; `).join(&#39;&#39;)).scrollTop($(&#39;#chat-box&#39;)[0].scrollHeight); } window.copyToClipboard = function(text) { navigator.clipboard.writeText(text).then(() =&gt; alert(&#39;Text copied to clipboard&#39;)).catch(() =&gt; alert(&#39;Failed to copy text to clipboard. Please try again.&#39;)); } window.playTextToSpeech = function(index) { const text = conversationHistory[index].text; const selectedVoiceName = $(&#39;#voice&#39;).val(); const pitch = $(&#39;#pitch&#39;).val() + &quot;%&quot;; const rate = $(&#39;#rate&#39;).val(); $.ajax({ type: &#39;POST&#39;, url: &#39;/synthesize&#39;, contentType: &#39;application/json&#39;, data: JSON.stringify({ text: text, voice_name: selectedVoiceName, pitch: pitch, rate: rate }), success: function(data) { new Audio(&#39;/audio/&#39; + data.audio_file).play().catch(() =&gt; alert(&#39;Failed to play audio.&#39;)); }, error: function() { alert(&#39;Speech synthesis failed. Please try again.&#39;); } }); } // Fetch chat messages every 2 seconds setInterval(fetchChatMessages, 2000); // Initial fetch fetchChatMessages(); }); &lt;/script&gt; </code></pre> <p></body> </html></p>

Log in or sign up for Devpost to join the conversation.