Spaces:

privateuserh
/

ai-avatar-v1-03

Running

App Files Files Community

privateuserh commited on Apr 7

Commit

a5ff74e

verified ·

1 Parent(s): 8e49add

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +1282 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Ai Avatar V1 03
-emoji: 🏃
 colorFrom: green
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: ai-avatar-v1-03
+emoji: 🐳
 colorFrom: green
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1282 @@
-<!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>AI Video Avatar - Your Digital Guide</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        :root {
+            --primary: #3b82f6;
+            --primary-dark: #2563eb;
+            --secondary: #f43f5e;
+        }
+        body {
+            font-family: 'Poppins', sans-serif;
+            background: #0f172a;
+            color: white;
+            overflow: hidden;
+            height: 100vh;
+        }
+        .video-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            overflow: hidden;
+        }
+        .video-placeholder {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            background-color: #1e293b;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .video-placeholder img {
+            max-width: 100%;
+            max-height: 100%;
+            object-fit: contain;
+        }
+        .video-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(to bottom, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.7) 100%);
+            z-index: 1;
+        }
+        .content-container {
+            position: relative;
+            z-index: 2;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            padding-bottom: 120px;
+        }
+        .speech-bubble {
+            position: relative;
+            background: rgba(30, 41, 59, 0.9);
+            border-radius: 1rem;
+            animation: pulse 2s infinite;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .speech-bubble:after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50px;
+            border-width: 10px 10px 0;
+            border-style: solid;
+            border-color: rgba(30, 41, 59, 0.9) transparent;
+        }
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
+            }
+        }
+        .typing-indicator span {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: white;
+            margin: 0 2px;
+            opacity: 0.4;
+        }
+        .typing-indicator span:nth-child(1) {
+            animation: typing 1s infinite;
+        }
+        .typing-indicator span:nth-child(2) {
+            animation: typing 1s infinite 0.2s;
+        }
+        .typing-indicator span:nth-child(3) {
+            animation: typing 1s infinite 0.4s;
+        }
+        @keyframes typing {
+            0% {
+                opacity: 0.4;
+                transform: translateY(0);
+            }
+            50% {
+                opacity: 1;
+                transform: translateY(-5px);
+            }
+            100% {
+                opacity: 0.4;
+                transform: translateY(0);
+            }
+        }
+        .lip-sync {
+            animation: lip-sync 0.5s infinite alternate;
+        }
+        @keyframes lip-sync {
+            0% {
+                transform: scaleY(1);
+            }
+            100% {
+                transform: scaleY(0.8);
+            }
+        }
+        .news-card {
+            background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
+            backdrop-filter: blur(10px);
+            transition: all 0.3s ease;
+        }
+        .news-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+        }
+        .social-icon {
+            transition: all 0.3s ease;
+        }
+        .social-icon:hover {
+            transform: scale(1.2);
+        }
+        .upload-btn {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            z-index: 10;
+            background: rgba(30, 41, 59, 0.8);
+            border: 1px solid #3b82f6;
+            color: white;
+            padding: 8px 16px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .upload-btn:hover {
+            background: rgba(59, 130, 246, 0.8);
+        }
+        #file-input {
+            display: none;
+        }
+        .upload-icon {
+            margin-right: 8px;
+        }
+        .avatar-placeholder-text {
+            color: rgba(255, 255, 255, 0.5);
+            font-size: 1.2rem;
+            text-align: center;
+            padding: 20px;
+        }
+        /* Floating action button styles */
+        .fab-container {
+            position: fixed;
+            bottom: 30px;
+            right: 30px;
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+        }
+        .fab-main {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #3b82f6, #2563eb);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            z-index: 101;
+        }
+        .fab-main:hover {
+            transform: scale(1.1);
+            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
+        }
+        .fab-menu {
+            position: absolute;
+            bottom: 70px;
+            right: 0;
+            width: 300px;
+            background: rgba(30, 41, 59, 0.95);
+            border-radius: 16px;
+            padding: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            transform: translateY(20px);
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+        .fab-menu.active {
+            transform: translateY(0);
+            opacity: 1;
+            pointer-events: all;
+        }
+        .fab-menu-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        .fab-menu-title {
+            font-weight: 600;
+            color: #3b82f6;
+        }
+        .fab-close-btn {
+            background: none;
+            border: none;
+            color: rgba(255, 255, 255, 0.5);
+            font-size: 20px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .fab-close-btn:hover {
+            color: white;
+        }
+        .fab-menu-content {
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        .fab-menu-tabs {
+            display: flex;
+            margin-bottom: 15px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .fab-tab {
+            padding: 8px 16px;
+            cursor: pointer;
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 14px;
+            transition: all 0.2s ease;
+            border-bottom: 2px solid transparent;
+        }
+        .fab-tab.active {
+            color: white;
+            border-bottom: 2px solid #3b82f6;
+        }
+        .fab-tab:hover {
+            color: white;
+        }
+        .fab-tab-content {
+            display: none;
+        }
+        .fab-tab-content.active {
+            display: block;
+        }
+        .fab-chat-input {
+            display: flex;
+            gap: 10px;
+            margin-top: 15px;
+        }
+        .fab-chat-input input {
+            flex: 1;
+            background: rgba(15, 23, 42, 0.7);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 8px;
+            padding: 10px 15px;
+            color: white;
+            outline: none;
+        }
+        .fab-chat-input button {
+            background: #3b82f6;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            padding: 0 15px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .fab-chat-input button:hover {
+            background: #2563eb;
+        }
+        /* TTS Button Styles */
+        .tts-container {
+            position: fixed;
+            bottom: 30px;
+            right: 100px;
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+        }
+        .tts-button {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #f43f5e, #e11d48);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            z-index: 101;
+            border: none;
+            outline: none;
+        }
+        .tts-button:hover {
+            transform: scale(1.1);
+            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
+        }
+        .tts-button.listening {
+            animation: pulse-red 1.5s infinite;
+        }
+        .tts-panel {
+            position: absolute;
+            bottom: 70px;
+            right: 0;
+            width: 300px;
+            background: rgba(30, 41, 59, 0.95);
+            border-radius: 16px;
+            padding: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            transform: translateY(20px);
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+        }
+        .tts-panel.active {
+            transform: translateY(0);
+            opacity: 1;
+            pointer-events: all;
+        }
+        .tts-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        .tts-title {
+            font-weight: 600;
+            color: #f43f5e;
+        }
+        .tts-close-btn {
+            background: none;
+            border: none;
+            color: rgba(255, 255, 255, 0.5);
+            font-size: 20px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .tts-close-btn:hover {
+            color: white;
+        }
+        .tts-content {
+            max-height: 300px;
+            overflow-y: auto;
+            margin-bottom: 15px;
+        }
+        .tts-status {
+            font-size: 14px;
+            color: rgba(255, 255, 255, 0.7);
+            margin-bottom: 10px;
+            text-align: center;
+        }
+        .tts-transcript {
+            background: rgba(15, 23, 42, 0.7);
+            border-radius: 8px;
+            padding: 10px;
+            min-height: 60px;
+            margin-bottom: 15px;
+        }
+        .tts-controls {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+        }
+        .tts-controls button {
+            background: #f43f5e;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            padding: 8px 15px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .tts-controls button:hover {
+            background: #e11d48;
+        }
+        .tts-controls button.secondary {
+            background: rgba(255, 255, 255, 0.1);
+        }
+        .tts-controls button.secondary:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+        @keyframes pulse-red {
+            0% {
+                box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(244, 63, 94, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(244, 63, 94, 0);
+            }
+        }
+        /* Telegram Feed Styles */
+        .telegram-container {
+            position: fixed;
+            bottom: 30px;
+            left: 30px;
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        .telegram-button {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #0088cc, #0077b5);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            z-index: 101;
+        }
+        .telegram-button:hover {
+            transform: scale(1.1);
+            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4);
+        }
+        .telegram-panel {
+            position: absolute;
+            bottom: 70px;
+            left: 0;
+            width: 350px;
+            max-height: 500px;
+            background: rgba(30, 41, 59, 0.95);
+            border-radius: 16px;
+            padding: 20px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            transform: translateY(20px);
+            opacity: 0;
+            pointer-events: none;
+            transition: all 0.3s ease;
+            backdrop-filter: blur(10px);
+            display: flex;
+            flex-direction: column;
+        }
+        .telegram-panel.active {
+            transform: translateY(0);
+            opacity: 1;
+            pointer-events: all;
+        }
+        .telegram-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 15px;
+        }
+        .telegram-title {
+            font-weight: 600;
+            color: #0088cc;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .telegram-close-btn {
+            background: none;
+            border: none;
+            color: rgba(255, 255, 255, 0.5);
+            font-size: 20px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .telegram-close-btn:hover {
+            color: white;
+        }
+        .telegram-content {
+            flex: 1;
+            overflow-y: auto;
+            margin-bottom: 15px;
+        }
+        .telegram-post {
+            background: rgba(15, 23, 42, 0.7);
+            border-radius: 12px;
+            padding: 15px;
+            margin-bottom: 15px;
+            transition: all 0.3s ease;
+        }
+        .telegram-post:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+        }
+        .telegram-post-header {
+            display: flex;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .telegram-post-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background-color: #0088cc;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 10px;
+        }
+        .telegram-post-author {
+            font-weight: 600;
+            color: #0088cc;
+        }
+        .telegram-post-date {
+            font-size: 12px;
+            color: rgba(255, 255, 255, 0.5);
+            margin-left: auto;
+        }
+        .telegram-post-text {
+            margin-bottom: 10px;
+            line-height: 1.5;
+        }
+        .telegram-post-image {
+            width: 100%;
+            border-radius: 8px;
+            margin-bottom: 10px;
+        }
+        .telegram-footer {
+            display: flex;
+            justify-content: center;
+        }
+        .telegram-view-all {
+            background: rgba(0, 136, 204, 0.2);
+            color: #0088cc;
+            border: none;
+            border-radius: 8px;
+            padding: 8px 15px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-size: 14px;
+        }
+        .telegram-view-all:hover {
+            background: rgba(0, 136, 204, 0.3);
+        }
+        /* Scrollbar styling */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+        ::-webkit-scrollbar-track {
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 3px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: rgba(255, 255, 255, 0.3);
+        }
+    </style>
+</head>
+<body>
+    <!-- Video Avatar Container -->
+    <div class="video-container">
+        <div class="video-placeholder" id="video-placeholder">
+            <div class="avatar-placeholder-text">
+                <i class="fas fa-user-circle text-6xl mb-4"></i>
+                <p>Upload an image to create your AI video avatar</p>
+            </div>
+        </div>
+        <div class="video-overlay"></div>
+    </div>
+    <!-- Upload Button -->
+    <button class="upload-btn" onclick="document.getElementById('file-input').click()">
+        <i class="fas fa-upload upload-icon"></i>
+        Upload Avatar Image
+    </button>
+    <input type="file" id="file-input" accept="image/*">
+    <!-- Content Container -->
+    <div class="content-container">
+        <!-- Speech Bubble -->
+        <div class="speech-bubble p-6 mb-6 mx-4 relative">
+            <div id="avatar-message" class="text-lg">
+                Hello there! I'm your AI Avatar. Upload an image to create your personalized video avatar.
+            </div>
+            <div id="typing-indicator" class="typing-indicator hidden mt-2">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+        <!-- Social Media & Controls -->
+        <div class="flex justify-center gap-6 mt-8">
+            <a href="https://t.me/SMPlusBot" target="_blank" class="social-icon text-blue-400 hover:text-blue-300 text-2xl">
+                <i class="fab fa-telegram"></i>
+            </a>
+            <button onclick="toggleFullscreen()" class="social-icon text-white hover:text-gray-300 text-2xl">
+                <i class="fas fa-expand"></i>
+            </button>
+            <button onclick="toggleMute()" class="social-icon text-white hover:text-gray-300 text-2xl">
+                <i id="mute-icon" class="fas fa-volume-up"></i>
+            </button>
+        </div>
+    </div>
+    <!-- Telegram Feed Panel -->
+    <div class="telegram-container">
+        <div class="telegram-panel" id="telegram-panel">
+            <div class="telegram-header">
+                <div class="telegram-title">
+                    <i class="fab fa-telegram"></i> Telegram Feed
+                </div>
+                <button class="telegram-close-btn" onclick="toggleTelegramPanel()">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="telegram-content" id="telegram-content">
+                <!-- Telegram posts will be loaded here -->
+                <div class="text-center py-10 text-gray-400">
+                    <i class="fas fa-spinner fa-spin text-2xl mb-2"></i>
+                    <p>Loading Telegram feed...</p>
+                </div>
+            </div>
+            <div class="telegram-footer">
+                <button class="telegram-view-all" onclick="window.open('https://t.me/SMPlusBot', '_blank')">
+                    View on Telegram
+                </button>
+            </div>
+        </div>
+        <button class="telegram-button" onclick="toggleTelegramPanel()">
+            <i class="fab fa-telegram"></i>
+        </button>
+    </div>
+    <!-- TTS (Voice Input) Button -->
+    <div class="tts-container">
+        <div class="tts-panel" id="tts-panel">
+            <div class="tts-header">
+                <div class="tts-title">Voice Command</div>
+                <button class="tts-close-btn" onclick="toggleTtsPanel()">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="tts-content">
+                <div class="tts-status" id="tts-status">
+                    Click the microphone to start speaking
+                </div>
+                <div class="tts-transcript" id="tts-transcript">
+                    Your voice input will appear here...
+                </div>
+            </div>
+            <div class="tts-controls">
+                <button id="tts-start-btn" onclick="startVoiceRecognition()">
+                    <i class="fas fa-microphone"></i> Start
+                </button>
+                <button class="secondary" onclick="clearTranscript()">
+                    <i class="fas fa-trash"></i> Clear
+                </button>
+                <button class="secondary" onclick="submitVoiceCommand()">
+                    <i class="fas fa-paper-plane"></i> Send
+                </button>
+            </div>
+        </div>
+        <button class="tts-button" id="tts-button" onclick="toggleTtsPanel()">
+            <img src="https://cdn-icons-png.flaticon.com/512/4712/4712139.png" width="30" height="30" alt="Voice Assistant">
+        </button>
+    </div>
+    <!-- Floating Action Button -->
+    <div class="fab-container">
+        <div class="fab-menu" id="fab-menu">
+            <div class="fab-menu-header">
+                <div class="fab-menu-title">AI Assistant</div>
+                <button class="fab-close-btn" onclick="toggleFabMenu()">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="fab-menu-tabs">
+                <div class="fab-tab active" onclick="switchTab('topics')">Topics</div>
+                <div class="fab-tab" onclick="switchTab('chat')">Chat</div>
+            </div>
+            <div class="fab-menu-content">
+                <div class="fab-tab-content active" id="topics-tab">
+                    <div class="grid grid-cols-1 gap-3">
+                        <div class="news-card p-4 rounded-xl cursor-pointer" onclick="selectTopic('technology')">
+                            <h3 class="font-bold text-blue-300">Tech Updates</h3>
+                            <p class="text-sm">Latest in AI and gadgets</p>
+                        </div>
+                        <div class="news-card p-4 rounded-xl cursor-pointer" onclick="selectTopic('entertainment')">
+                            <h3 class="font-bold text-pink-300">Entertainment</h3>
+                            <p class="text-sm">Movies, music and celebrity news</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="fab-tab-content" id="chat-tab">
+                    <div class="text-center text-gray-400 py-4">
+                        Ask me anything about technology, entertainment, or current events
+                    </div>
+                    <div class="fab-chat-input">
+                        <input type="text" id="fab-user-input" placeholder="Type your message...">
+                        <button onclick="sendMessageFromFab()">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="fab-main" onclick="toggleFabMenu()">
+            <i class="fas fa-comment-dots"></i>
+        </div>
+    </div>
+    <script>
+        // Speech Synthesis
+        const synth = window.speechSynthesis;
+        let isSpeaking = false;
+        let isMuted = false;
+        // Voice recognition
+        let recognition;
+        let isListening = false;
+        let finalTranscript = '';
+        // Telegram API token
+        const TELEGRAM_BOT_TOKEN = '5908509381:AAFzbvZC0YXuxkCA_qGjlc9NyjeYCtXHs-8';
+        // Sample knowledge base
+        const knowledgeBase = {
+            technology: [
+                "The latest AI models can now generate realistic video from text prompts. This could revolutionize content creation.",
+                "Quantum computing is making progress with several companies announcing breakthroughs in qubit stability.",
+                "The metaverse continues to evolve with new VR headsets offering higher resolution and better motion tracking."
+            ],
+            entertainment: [
+                "The summer blockbuster season is heating up with several highly anticipated movies releasing this month.",
+                "Streaming platforms are investing heavily in original content, with over 500 new shows announced this year.",
+                "Music festivals are returning in full force after the pandemic, with record ticket sales reported."
+            ],
+            default: [
+                "I'm here to help you stay informed about the latest trends and news.",
+                "Did you know I can summarize complex topics into easy-to-understand explanations?",
+                "Feel free to ask me about technology, entertainment, or current events."
+            ]
+        };
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            // Start with a greeting
+            setTimeout(() => {
+                speak("Hello there! I'm your AI guide. Upload an image to create your personalized video avatar.");
+            }, 1000);
+            // Set up image upload
+            document.getElementById('file-input').addEventListener('change', handleImageUpload);
+            // Set up keyboard events for fab input
+            document.getElementById('fab-user-input').addEventListener('keypress', (e) => {
+                if (e.key === 'Enter') {
+                    sendMessageFromFab();
+                }
+            });
+            // Initialize voice recognition
+            initVoiceRecognition();
+            // Load Telegram feed
+            loadTelegramFeed();
+        });
+        // Handle image upload
+        function handleImageUpload(event) {
+            const file = event.target.files[0];
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const placeholder = document.getElementById('video-placeholder');
+                placeholder.innerHTML = '';
+                const img = document.createElement('img');
+                img.src = e.target.result;
+                img.alt = 'AI Avatar';
+                placeholder.appendChild(img);
+                // Simulate video processing
+                setTimeout(() => {
+                    speak("Thank you! Your AI video avatar is being processed. In a real implementation, this would generate a lifelike talking avatar from your image.");
+                }, 1000);
+            };
+            reader.readAsDataURL(file);
+        }
+        // Speech function
+        function speak(text) {
+            if (isMuted) return;
+            const utterance = new SpeechSynthesisUtterance(text);
+            utterance.voice = synth.getVoices().find(voice => voice.name.includes('English'));
+            utterance.pitch = 1;
+            utterance.rate = 1;
+            utterance.volume = 1;
+            isSpeaking = true;
+            synth.speak(utterance);
+            utterance.onend = () => {
+                isSpeaking = false;
+            };
+            // Display message
+            document.getElementById('avatar-message').textContent = text;
+        }
+        // Process user input
+        function sendMessage() {
+            const input = document.getElementById('user-input');
+            const message = input.value.trim();
+            if (message) {
+                // Show user message temporarily
+                document.getElementById('avatar-message').textContent = `You: ${message}`;
+                input.value = '';
+                // Show typing indicator
+                document.getElementById('typing-indicator').classList.remove('hidden');
+                // Process after delay
+                setTimeout(() => {
+                    document.getElementById('typing-indicator').classList.add('hidden');
+                    respondToMessage(message);
+                }, 1500);
+            }
+        }
+        // Process user input from FAB
+        function sendMessageFromFab() {
+            const input = document.getElementById('fab-user-input');
+            const message = input.value.trim();
+            if (message) {
+                // Show user message temporarily
+                document.getElementById('avatar-message').textContent = `You: ${message}`;
+                input.value = '';
+                // Show typing indicator
+                document.getElementById('typing-indicator').classList.remove('hidden');
+                // Process after delay
+                setTimeout(() => {
+                    document.getElementById('typing-indicator').classList.add('hidden');
+                    respondToMessage(message);
+                }, 1500);
+            }
+        }
+        // AI response logic
+        function respondToMessage(message) {
+            let response = "";
+            const lowerMsg = message.toLowerCase();
+            if (lowerMsg.includes('tech') || lowerMsg.includes('technology')) {
+                const techResponses = knowledgeBase.technology;
+                response = techResponses[Math.floor(Math.random() * techResponses.length)];
+            }
+            else if (lowerMsg.includes('movie') || lowerMsg.includes('music') || lowerMsg.includes('entertainment')) {
+                const entResponses = knowledgeBase.entertainment;
+                response = entResponses[Math.floor(Math.random() * entResponses.length)];
+            }
+            else if (lowerMsg.includes('hello') || lowerMsg.includes('hi')) {
+                response = "Hello! It's great to connect with you. How can I assist you today?";
+            }
+            else if (lowerMsg.includes('how are you')) {
+                response = "I'm an AI, so I don't have feelings, but I'm functioning optimally and ready to help you!";
+            }
+            else {
+                const defaultResponses = knowledgeBase.default;
+                response = defaultResponses[Math.floor(Math.random() * defaultResponses.length)];
+            }
+            speak(response);
+        }
+        // Topic selection
+        function selectTopic(topic) {
+            const message = `Tell me about ${topic}`;
+            document.getElementById('avatar-message').textContent = `You: ${message}`;
+            // Show typing indicator
+            document.getElementById('typing-indicator').classList.remove('hidden');
+            // Process after delay
+            setTimeout(() => {
+                document.getElementById('typing-indicator').classList.add('hidden');
+                respondToMessage(message);
+            }, 1500);
+            // Close the menu
+            toggleFabMenu();
+        }
+        // Fullscreen toggle
+        function toggleFullscreen() {
+            if (!document.fullscreenElement) {
+                document.documentElement.requestFullscreen();
+            } else {
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                }
+            }
+        }
+        // Mute toggle
+        function toggleMute() {
+            isMuted = !isMuted;
+            const icon = document.getElementById('mute-icon');
+            if (isMuted) {
+                icon.classList.remove('fa-volume-up');
+                icon.classList.add('fa-volume-mute');
+                synth.cancel();
+            } else {
+                icon.classList.remove('fa-volume-mute');
+                icon.classList.add('fa-volume-up');
+            }
+        }
+        // Toggle FAB menu
+        function toggleFabMenu() {
+            const menu = document.getElementById('fab-menu');
+            menu.classList.toggle('active');
+            // Close other panels if open
+            document.getElementById('telegram-panel').classList.remove('active');
+            document.getElementById('tts-panel').classList.remove('active');
+        }
+        // Switch between tabs in FAB menu
+        function switchTab(tabName) {
+            // Update active tab
+            document.querySelectorAll('.fab-tab').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            event.target.classList.add('active');
+            // Update active content
+            document.querySelectorAll('.fab-tab-content').forEach(content => {
+                content.classList.remove('active');
+            });
+            document.getElementById(`${tabName}-tab`).classList.add('active');
+        }
+        // Toggle TTS panel
+        function toggleTtsPanel() {
+            const panel = document.getElementById('tts-panel');
+            panel.classList.toggle('active');
+            // Close other panels if open
+            document.getElementById('fab-menu').classList.remove('active');
+            document.getElementById('telegram-panel').classList.remove('active');
+        }
+        // Toggle Telegram panel
+        function toggleTelegramPanel() {
+            const panel = document.getElementById('telegram-panel');
+            panel.classList.toggle('active');
+            // Close other panels if open
+            document.getElementById('fab-menu').classList.remove('active');
+            document.getElementById('tts-panel').classList.remove('active');
+        }
+        // Initialize voice recognition
+        function initVoiceRecognition() {
+            try {
+                const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+                recognition = new SpeechRecognition();
+                recognition.continuous = false;
+                recognition.interimResults = true;
+                recognition.onstart = function() {
+                    isListening = true;
+                    document.getElementById('tts-button').classList.add('listening');
+                    document.getElementById('tts-status').textContent = 'Listening... Speak now';
+                };
+                recognition.onerror = function(event) {
+                    console.error('Speech recognition error', event.error);
+                    stopVoiceRecognition();
+                    document.getElementById('tts-status').textContent = 'Error: ' + event.error;
+                };
+                recognition.onend = function() {
+                    stopVoiceRecognition();
+                    if (finalTranscript.trim()) {
+                        document.getElementById('tts-status').textContent = 'Click send or speak again';
+                    } else {
+                        document.getElementById('tts-status').textContent = 'Click the microphone to start speaking';
+                    }
+                };
+                recognition.onresult = function(event) {
+                    let interimTranscript = '';
+                    for (let i = event.resultIndex; i < event.results.length; i++) {
+                        const transcript = event.results[i][0].transcript;
+                        if (event.results[i].isFinal) {
+                            finalTranscript += transcript;
+                        } else {
+                            interimTranscript += transcript;
+                        }
+                    }
+                    document.getElementById('tts-transcript').innerHTML =
+                        `<span class="text-white">${finalTranscript}</span>` +
+                        `<span class="text-gray-400">${interimTranscript}</span>`;
+                };
+            } catch (e) {
+                console.error('Speech recognition not supported', e);
+                document.getElementById('tts-status').textContent = 'Voice recognition not supported in this browser';
+                document.getElementById('tts-start-btn').disabled = true;
+            }
+        }
+        // Start voice recognition
+        function startVoiceRecognition() {
+            if (!recognition) return;
+            finalTranscript = '';
+            document.getElementById('tts-transcript').textContent = 'Your voice input will appear here...';
+            try {
+                recognition.start();
+            } catch (e) {
+                console.error('Error starting recognition:', e);
+                document.getElementById('tts-status').textContent = 'Error starting voice recognition';
+            }
+        }
+        // Stop voice recognition
+        function stopVoiceRecognition() {
+            isListening = false;
+            document.getElementById('tts-button').classList.remove('listening');
+            if (recognition) {
+                recognition.stop();
+            }
+        }
+        // Clear transcript
+        function clearTranscript() {
+            finalTranscript = '';
+            document.getElementById('tts-transcript').textContent = 'Your voice input will appear here...';
+            document.getElementById('tts-status').textContent = 'Click the microphone to start speaking';
+        }
+        // Submit voice command
+        function submitVoiceCommand() {
+            if (finalTranscript.trim()) {
+                // Close TTS panel
+                toggleTtsPanel();
+                // Show user message
+                document.getElementById('avatar-message').textContent = `You: ${finalTranscript}`;
+                // Show typing indicator
+                document.getElementById('typing-indicator').classList.remove('hidden');
+                // Process after delay
+                setTimeout(() => {
+                    document.getElementById('typing-indicator').classList.add('hidden');
+                    respondToMessage(finalTranscript);
+                }, 1500);
+                // Clear transcript
+                clearTranscript();
+            }
+        }
+        // Load Telegram feed (simulated since we can't directly access Telegram API from frontend)
+        function loadTelegramFeed() {
+            // In a real implementation, you would need a backend service to fetch Telegram posts
+            // using the bot token. Here we simulate some posts after a delay.
+            setTimeout(() => {
+                const telegramContent = document.getElementById('telegram-content');
+                telegramContent.innerHTML = '';
+                // Sample Telegram posts
+                const samplePosts = [
+                    {
+                        author: "SMPlusBot",
+                        date: "2 minutes ago",
+                        text: "Welcome to our AI Avatar platform! Get started by uploading your image to create a personalized video avatar.",
+                        image: "https://via.placeholder.com/300x150/0088cc/ffffff?text=AI+Avatar"
+                    },
+                    {
+                        author: "SMPlusBot",
+                        date: "15 minutes ago",
+                        date: "15 minutes ago",
+                        text: "New feature alert: You can now interact with your avatar using voice commands. Try it out!",
+                        image: "https://via.placeholder.com/300x150/0088cc/ffffff?text=Voice+Commands"
+                    },
+                    {
+                        author: "SMPlusBot",
+                        date: "1 hour ago",
+                        text: "Did you know you can share your avatar on social media? Click the Telegram icon to share your creation!",
+                        image: null
+                    }
+                ];
+                samplePosts.forEach(post => {
+                    const postElement = document.createElement('div');
+                    postElement.className = 'telegram-post';
+                    let imageHtml = '';
+                    if (post.image) {
+                        imageHtml = `<img src="${post.image}" class="telegram-post-image" alt="Telegram post image">`;
+                    }
+                    postElement.innerHTML = `
+                        <div class="telegram-post-header">
+                            <div class="telegram-post-avatar">
+                                <i class="fab fa-telegram"></i>
+                            </div>
+                            <div class="telegram-post-author">${post.author}</div>
+                            <div class="telegram-post-date">${post.date}</div>
+                        </div>
+                        <div class="telegram-post-text">${post.text}</div>
+                        ${imageHtml}
+                    `;
+                    telegramContent.appendChild(postElement);
+                });
+            }, 1500);
+        }
+        // Keyboard support
+        document.getElementById('user-input').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                sendMessage();
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=privateuserh/ai-avatar-v1-03" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>