Spaces:

jblast94
/

chatverse-ai-powered-communication-hub

Running

App Files Files Community

jblast94 commited on Nov 12

Commit

d78b9be

verified ·

1 Parent(s): ca91ffe

chat ui with live voice, text input, screen sharing, backend-supabase, workflow-n8n, voice tts-runpod endpoint,voice tts-runpod endpoint, llm-settings menu for providor,api,model or local hosted

Browse files

Files changed (5) hide show

README.md +7 -4
components/navbar.js +76 -0
index.html +48 -19
script.js +162 -0
style.css +52 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Chatverse Ai Powered Communication Hub
-emoji: 🦀
-colorFrom: gray
 colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ChatVerse - AI-Powered Communication Hub 🚀
+colorFrom: purple
 colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js ADDED Viewed

	@@ -0,0 +1,76 @@

+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    z-index: 50;
+                    background-color: var(--primary);
+                    color: white;
+                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                }
+                .container {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    padding: 0.75rem 1rem;
+                    max-width: 100%;
+                }
+                .logo {
+                    font-weight: 600;
+                    font-size: 1.25rem;
+                    display: flex;
+                    align-items: center;
+                }
+                .logo-icon {
+                    margin-right: 0.5rem;
+                }
+                .actions {
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                }
+                .action-btn {
+                    background-color: rgba(255, 255, 255, 0.1);
+                    border-radius: 0.375rem;
+                    padding: 0.5rem;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+                    transition: background-color 0.2s;
+                }
+                .action-btn:hover {
+                    background-color: rgba(255, 255, 255, 0.2);
+                }
+                .dark-mode-toggle {
+                    background-color: transparent;
+                    border: none;
+                    color: inherit;
+                    cursor: pointer;
+                }
+            </style>
+            <div class="container">
+                <div class="logo">
+                    <i class="logo-icon" data-feather="message-square"></i>
+                    <span>ChatVerse</span>
+                </div>
+                <div class="actions">
+                    <button class="action-btn" id="screen-share-btn" title="Share Screen">
+                        <i data-feather="monitor"></i>
+                    </button>
+                    <button

index.html CHANGED Viewed

@@ -1,19 +1,48 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ChatVerse - AI Communication Hub</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/sidebar.js"></script>
+    <script src="components/chat-input.js"></script>
+    <script src="components/llm-settings.js"></script>
+</head>
+<body class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
+    <custom-navbar></custom-navbar>
+    <div class="flex h-screen pt-16">
+        <custom-sidebar></custom-sidebar>
+        <main class="flex-1 flex flex-col">
+            <div class="flex-1 overflow-y-auto p-4" id="chat-container">
+                <!-- Messages will be loaded here -->
+            </div>
+            <div class="border-t border-gray-200 dark:border-gray-700 p-4">
+                <custom-chat-input></custom-chat-input>
+            </div>
+        </main>
+        <div class="w-80 border-l border-gray-200 dark:border-gray-700 p-4 hidden lg:block">
+            <custom-llm-settings></custom-llm-settings>
+        </div>
+    </div>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Initialize Supabase
+        const supabaseUrl = 'YOUR_SUPABASE_URL';
+        const supabaseKey = 'YOUR_SUPABASE_KEY';
+        const supabase = supabase.createClient(supabaseUrl, supabaseKey);
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,162 @@

+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize UI elements
+    initVoiceControls();
+    initScreenShare();
+    initChat();
+});
+function initVoiceControls() {
+    const voiceBtn = document.getElementById('voice-btn');
+    const voiceStatus = document.getElementById('voice-status');
+    let isRecording = false;
+    let mediaRecorder;
+    let audioChunks = [];
+    voiceBtn.addEventListener('click', async () => {
+        if (!isRecording) {
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                mediaRecorder = new MediaRecorder(stream);
+                mediaRecorder.ondataavailable = (e) => {
+                    audioChunks.push(e.data);
+                };
+                mediaRecorder.onstop = async () => {
+                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                    await processVoiceInput(audioBlob);
+                    audioChunks = [];
+                };
+                mediaRecorder.start();
+                isRecording = true;
+                voiceStatus.textContent = 'Recording...';
+                voiceBtn.classList.add('recording');
+            } catch (err) {
+                console.error('Error accessing microphone:', err);
+            }
+        } else {
+            mediaRecorder.stop();
+            isRecording = false;
+            voiceStatus.textContent = '';
+            voiceBtn.classList.remove('recording');
+        }
+    });
+}
+async function processVoiceInput(audioBlob) {
+    // Send to RunPod TTS endpoint
+    const formData = new FormData();
+    formData.append('audio', audioBlob);
+    try {
+        const response = await fetch('YOUR_RUNPOD_ENDPOINT', {
+            method: 'POST',
+            body: formData
+        });
+        const { text } = await response.json();
+        await sendMessage(text);
+    } catch (err) {
+        console.error('Error processing voice input:', err);
+    }
+}
+function initScreenShare() {
+    const screenShareBtn = document.getElementById('screen-share-btn');
+    screenShareBtn.addEventListener('click', async () => {
+        try {
+            const stream = await navigator.mediaDevices.getDisplayMedia({
+                video: true,
+                audio: true
+            });
+            const videoElement = document.createElement('video');
+            videoElement.srcObject = stream;
+            videoElement.autoplay = true;
+            const screenContainer = document.getElementById('screen-share-container');
+            screenContainer.innerHTML = '';
+            screenContainer.appendChild(videoElement);
+            stream.getVideoTracks()[0].onended = () => {
+                screenContainer.innerHTML = '';
+            };
+        } catch (err) {
+            console.error('Error sharing screen:', err);
+        }
+    });
+}
+async function initChat() {
+    // Load chat history from Supabase
+    const { data: messages, error } = await supabase
+        .from('messages')
+        .select('*')
+        .order('created_at', { ascending: true });
+    if (!error && messages) {
+        const chatContainer = document.getElementById('chat-container');
+        messages.forEach(msg => {
+            const messageElement = createMessageElement(msg);
+            chatContainer.appendChild(messageElement);
+        });
+    }
+    // Subscribe to new messages
+    supabase
+        .channel('messages')
+        .on('postgres_changes', {
+            event: 'INSERT',
+            schema: 'public',
+            table: 'messages'
+        }, (payload) => {
+            const messageElement = createMessageElement(payload.new);
+            document.getElementById('chat-container').appendChild(messageElement);
+        })
+        .subscribe();
+}
+function createMessageElement(message) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message mb-4 p-3 rounded-lg max-w-3/4 ${
+        message.is_user ? 'bg-blue-100 dark:bg-blue-900 ml-auto' : 'bg-gray-200 dark:bg-gray-800 mr-auto'
+    }`;
+    messageDiv.innerHTML = `
+        <div class="flex items-start">
+            <div class="flex-shrink-0 h-8 w-8 rounded-full ${
+                message.is_user ? 'bg-blue-500' : 'bg-purple-500'
+            } flex items-center justify-center text-white">
+                ${message.is_user ? '<i data-feather="user"></i>' : '<i data-feather="cpu"></i>'}
+            </div>
+            <div class="ml-3">
+                <p class="text-sm font-medium">${message.is_user ? 'You' : 'AI Assistant'}</p>
+                <p class="mt-1 text-sm">${message.content}</p>
+                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">${new Date(message.created_at).toLocaleTimeString()}</p>
+            </div>
+        </div>
+    `;
+    feather.replace({ scope: messageDiv });
+    return messageDiv;
+}
+async function sendMessage(content) {
+    const { error } = await supabase
+        .from('messages')
+        .insert([{ content, is_user: true }]);
+    if (!error) {
+        // Trigger n8n workflow for AI response
+        await fetch('YOUR_N8N_WORKFLOW_URL', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ message: content })
+        });
+    }
+}

style.css CHANGED Viewed

@@ -1,28 +1,62 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+:root {
+    --primary: #6366f1;
+    --secondary: #8b5cf6;
+}
 body {
+    font-family: 'Inter', sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+    background: #888;
+    border-radius: 4px;
 }
+.dark ::-webkit-scrollbar-track {
+    background: #1f2937;
 }
+.dark ::-webkit-scrollbar-thumb {
+    background: #4b5563;
 }
+/* Animation for new messages */
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
+.message {
+    animation: slideIn 0.3s ease-out;
 }
+/* Voice recording animation */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+.recording {
+    animation: pulse 1.5s infinite;
+}