Voice-Clone-Multilingual

Running on Zero

App Files Files Community

Sami commited on Feb 6

Commit

ada290b

1 Parent(s): 802577d

Auto-commit: Updates Thu Feb 6 02:16:39 CET 2025

Browse files

Files changed (2) hide show

Voice-Clone-Multilingual.code-workspace +12 -0
autome.html +297 -0

Voice-Clone-Multilingual.code-workspace ADDED Viewed

	@@ -0,0 +1,12 @@

+{
+	"folders": [
+		{
+			"path": "."
+		},
+		{
+			"name": "Filtered View",
+			"uri": "fildir:/"
+		}
+	],
+	"settings": {}
+}

autome.html ADDED Viewed

	@@ -0,0 +1,297 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <meta name="theme-color" content="#1a1a2e">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <title>自动me | AutoMe</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+    <style>
+        :root {
+            --primary-color: #4a90e2;
+            --background-start: #1a1a2e;
+            --background-end: #16213e;
+            --text-color: #ffffff;
+            --tab-height: 60px;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            -webkit-tap-highlight-color: transparent;
+        }
+        body {
+            margin: 0;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, var(--background-start), var(--background-end));
+            color: var(--text-color);
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            padding-bottom: calc(var(--tab-height) + 20px);
+        }
+        .header {
+            text-align: center;
+            padding: 20px 0;
+            margin-bottom: 20px;
+        }
+        .logo {
+            font-size: 2.5em;
+            font-weight: bold;
+            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
+            -webkit-background-clip: text;
+            background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 10px;
+        }
+        .tabs {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: var(--tab-height);
+            display: flex;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            z-index: 1000;
+        }
+        .tab {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            color: var(--text-color);
+            border: none;
+            background: none;
+            cursor: pointer;
+            padding: 10px;
+            transition: all 0.3s ease;
+            gap: 5px;
+        }
+        .tab i {
+            font-size: 24px;
+        }
+        .tab span {
+            font-size: 12px;
+        }
+        .tab.active {
+            color: var(--primary-color);
+        }
+        .tab-content {
+            display: none;
+            background: rgba(255, 255, 255, 0.05);
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+            backdrop-filter: blur(5px);
+            -webkit-backdrop-filter: blur(5px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            animation: fadeIn 0.3s ease;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        .music-controls {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.8);
+            padding: 10px;
+            border-radius: 50px;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            z-index: 1001;
+            transform: scale(0.8);
+            transition: transform 0.3s ease;
+        }
+        .music-controls:hover {
+            transform: scale(1);
+        }
+        iframe, gradio-app {
+            width: 100%;
+            border-radius: 20px;
+            background: white;
+            height: 750px;
+        }
+        .loading {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: var(--background-start);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 2000;
+        }
+        .loading-spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid var(--primary-color);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        @media (max-width: 768px) {
+            .container {
+                padding: 10px;
+            }
+            iframe, gradio-app {
+                height: calc(100vh - 180px);
+            }
+            .header {
+                padding: 10px 0;
+            }
+            .logo {
+                font-size: 2em;
+            }
+        }
+        /* Add native-like touch feedback */
+        @media (hover: hover) {
+            .tab:hover {
+                background: rgba(255, 255, 255, 0.1);
+            }
+        }
+        .tab:active {
+            transform: scale(0.95);
+        }
+    </style>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="loading">
+        <div class="loading-spinner"></div>
+    </div>
+    <div class="container">
+        <div class="header">
+            <div class="logo">
+                <span class="cn">自动me</span>
+                <span class="en">AutoMe</span>
+            </div>
+        </div>
+        <div id="voice" class="tab-content active">
+            <gradio-app src="https://luigi12345-voice-clone-multilingual.hf.space"></gradio-app>
+        </div>
+        <div id="video" class="tab-content">
+            <iframe
+                src="https://fffiloni-videoretalking.hf.space"
+                frameborder="0"
+            ></iframe>
+        </div>
+    </div>
+    <div class="tabs">
+        <button class="tab active" onclick="switchTab('voice')">
+            <i class="fas fa-microphone"></i>
+            <span class="cn">声音克隆</span>
+            <span class="en">Voice Clone</span>
+        </button>
+        <button class="tab" onclick="switchTab('video')">
+            <i class="fas fa-video"></i>
+            <span class="cn">视频重说</span>
+            <span class="en">Video Retalk</span>
+        </button>
+    </div>
+    <div class="music-controls">
+        <audio controls loop>
+            <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
+        </audio>
+    </div>
+    <script type="module" src="https://gradio.s3-us-west-2.amazonaws.com/4.36.1/gradio.js"></script>
+    <script>
+        // Detect language preference
+        const userLang = navigator.language || navigator.userLanguage;
+        const isChinese = userLang.toLowerCase().includes('zh');
+        document.documentElement.lang = isChinese ? 'zh' : 'en';
+        document.body.classList.add(isChinese ? 'zh' : 'en');
+        // Show/hide language specific elements
+        document.querySelectorAll('.cn').forEach(el => {
+            el.style.display = isChinese ? 'inline' : 'none';
+        });
+        document.querySelectorAll('.en').forEach(el => {
+            el.style.display = isChinese ? 'none' : 'inline';
+        });
+        // Tab switching
+        function switchTab(tabId) {
+            document.querySelectorAll('.tab-content').forEach(content => {
+                content.classList.remove('active');
+            });
+            document.querySelectorAll('.tab').forEach(tab => {
+                tab.classList.remove('active');
+            });
+            document.getElementById(tabId).classList.add('active');
+            event.target.closest('.tab').classList.add('active');
+        }
+        // Remove loading screen when content is loaded
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                document.querySelector('.loading').style.display = 'none';
+            }, 1500);
+        });
+        // Handle PWA installation
+        if ('serviceWorker' in navigator) {
+            navigator.serviceWorker.register('/sw.js').catch(function(err) {
+                console.log('ServiceWorker registration failed: ', err);
+            });
+        }
+        // Prevent pull-to-refresh on mobile
+        document.body.addEventListener('touchmove', function(e) {
+            if (window.pageYOffset === 0) {
+                e.preventDefault();
+            }
+        }, { passive: false });
+    </script>
+</body>
+</html>