Spaces:
Running
Running
| import asyncio | |
| import base64 | |
| import json | |
| from pathlib import Path | |
| import os | |
| import numpy as np | |
| import openai | |
| from dotenv import load_dotenv | |
| from fastapi import FastAPI, Request | |
| from fastapi.responses import HTMLResponse, StreamingResponse | |
| from fastrtc import ( | |
| AdditionalOutputs, | |
| AsyncStreamHandler, | |
| Stream, | |
| get_twilio_turn_credentials, | |
| wait_for_item, | |
| ) | |
| from gradio.utils import get_space | |
| from openai.types.beta.realtime import ResponseAudioTranscriptDoneEvent | |
| import httpx | |
| from typing import Optional, List, Dict | |
| import gradio as gr | |
| load_dotenv() | |
| SAMPLE_RATE = 24000 | |
| # HTML content embedded as a string | |
| HTML_CONTENT = """<!DOCTYPE html> | |
| <html lang="ko"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MOUSE 음성 챗</title> | |
| <style> | |
| :root { | |
| --primary-color: #6f42c1; | |
| --secondary-color: #563d7c; | |
| --dark-bg: #121212; | |
| --card-bg: #1e1e1e; | |
| --text-color: #f8f9fa; | |
| --border-color: #333; | |
| --hover-color: #8a5cf6; | |
| } | |
| body { | |
| font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif; | |
| background-color: var(--dark-bg); | |
| color: var(--text-color); | |
| margin: 0; | |
| padding: 0; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .container { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| width: 100%; | |
| height: calc(100vh - 40px); | |
| box-sizing: border-box; | |
| } | |
| .header { | |
| text-align: center; | |
| padding: 20px 0; | |
| border-bottom: 1px solid var(--border-color); | |
| margin-bottom: 20px; | |
| flex-shrink: 0; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| .logo h1 { | |
| margin: 0; | |
| background: linear-gradient(135deg, var(--primary-color), #a78bfa); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| font-size: 32px; | |
| letter-spacing: 1px; | |
| } | |
| /* Web search toggle */ | |
| .search-toggle { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| margin-top: 15px; | |
| } | |
| .toggle-switch { | |
| position: relative; | |
| width: 50px; | |
| height: 26px; | |
| background-color: #ccc; | |
| border-radius: 13px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .toggle-switch.active { | |
| background-color: var(--primary-color); | |
| } | |
| .toggle-slider { | |
| position: absolute; | |
| top: 3px; | |
| left: 3px; | |
| width: 20px; | |
| height: 20px; | |
| background-color: white; | |
| border-radius: 50%; | |
| transition: transform 0.3s; | |
| } | |
| .toggle-switch.active .toggle-slider { | |
| transform: translateX(24px); | |
| } | |
| .search-label { | |
| font-size: 14px; | |
| color: #aaa; | |
| } | |
| .chat-container { | |
| border-radius: 12px; | |
| background-color: var(--card-bg); | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); | |
| padding: 20px; | |
| flex-grow: 1; | |
| display: flex; | |
| flex-direction: column; | |
| border: 1px solid var(--border-color); | |
| overflow: hidden; | |
| min-height: 0; | |
| } | |
| .chat-messages { | |
| flex-grow: 1; | |
| overflow-y: auto; | |
| padding: 10px; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--primary-color) var(--card-bg); | |
| min-height: 0; | |
| } | |
| .chat-messages::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .chat-messages::-webkit-scrollbar-thumb { | |
| background-color: var(--primary-color); | |
| border-radius: 6px; | |
| } | |
| .message { | |
| margin-bottom: 20px; | |
| padding: 14px; | |
| border-radius: 8px; | |
| font-size: 16px; | |
| line-height: 1.6; | |
| position: relative; | |
| max-width: 80%; | |
| animation: fade-in 0.3s ease-out; | |
| } | |
| @keyframes fade-in { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .message.user { | |
| background: linear-gradient(135deg, #2c3e50, #34495e); | |
| margin-left: auto; | |
| border-bottom-right-radius: 2px; | |
| } | |
| .message.assistant { | |
| background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); | |
| margin-right: auto; | |
| border-bottom-left-radius: 2px; | |
| } | |
| .message.search-result { | |
| background: linear-gradient(135deg, #1a5a3e, #2e7d32); | |
| font-size: 14px; | |
| padding: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .controls { | |
| text-align: center; | |
| margin-top: 20px; | |
| display: flex; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| } | |
| button { | |
| background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); | |
| color: white; | |
| border: none; | |
| padding: 14px 28px; | |
| font-family: inherit; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| border-radius: 50px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| box-shadow: 0 4px 10px rgba(111, 66, 193, 0.3); | |
| } | |
| button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 15px rgba(111, 66, 193, 0.5); | |
| background: linear-gradient(135deg, var(--hover-color), var(--primary-color)); | |
| } | |
| button:active { | |
| transform: translateY(1px); | |
| } | |
| #audio-output { | |
| display: none; | |
| } | |
| .icon-with-spinner { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| min-width: 180px; | |
| } | |
| .spinner { | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid #ffffff; | |
| border-top-color: transparent; | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| flex-shrink: 0; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .audio-visualizer { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 5px; | |
| min-width: 80px; | |
| height: 25px; | |
| } | |
| .visualizer-bar { | |
| width: 4px; | |
| height: 100%; | |
| background-color: rgba(255, 255, 255, 0.7); | |
| border-radius: 2px; | |
| transform-origin: bottom; | |
| transform: scaleY(0.1); | |
| transition: transform 0.1s ease; | |
| } | |
| .toast { | |
| position: fixed; | |
| top: 20px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| padding: 16px 24px; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| z-index: 1000; | |
| display: none; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); | |
| } | |
| .toast.error { | |
| background-color: #f44336; | |
| color: white; | |
| } | |
| .toast.warning { | |
| background-color: #ff9800; | |
| color: white; | |
| } | |
| .status-indicator { | |
| display: inline-flex; | |
| align-items: center; | |
| margin-top: 10px; | |
| font-size: 14px; | |
| color: #aaa; | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| margin-right: 8px; | |
| } | |
| .status-dot.connected { | |
| background-color: #4caf50; | |
| } | |
| .status-dot.disconnected { | |
| background-color: #f44336; | |
| } | |
| .status-dot.connecting { | |
| background-color: #ff9800; | |
| animation: pulse 1.5s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| opacity: 0.6; | |
| } | |
| 50% { | |
| opacity: 1; | |
| } | |
| 100% { | |
| opacity: 0.6; | |
| } | |
| } | |
| .mouse-logo { | |
| position: relative; | |
| width: 40px; | |
| height: 40px; | |
| } | |
| .mouse-ears { | |
| position: absolute; | |
| width: 15px; | |
| height: 15px; | |
| background-color: var(--primary-color); | |
| border-radius: 50%; | |
| } | |
| .mouse-ear-left { | |
| top: 0; | |
| left: 5px; | |
| } | |
| .mouse-ear-right { | |
| top: 0; | |
| right: 5px; | |
| } | |
| .mouse-face { | |
| position: absolute; | |
| top: 10px; | |
| left: 5px; | |
| width: 30px; | |
| height: 30px; | |
| background-color: var(--secondary-color); | |
| border-radius: 50%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="error-toast" class="toast"></div> | |
| <div class="container"> | |
| <div class="header"> | |
| <div class="logo"> | |
| <div class="mouse-logo"> | |
| <div class="mouse-ears mouse-ear-left"></div> | |
| <div class="mouse-ears mouse-ear-right"></div> | |
| <div class="mouse-face"></div> | |
| </div> | |
| <h1>MOUSE 음성 챗</h1> | |
| </div> | |
| <div class="search-toggle"> | |
| <span class="search-label">웹 검색</span> | |
| <div id="search-toggle" class="toggle-switch"> | |
| <div class="toggle-slider"></div> | |
| </div> | |
| </div> | |
| <div class="status-indicator"> | |
| <div id="status-dot" class="status-dot disconnected"></div> | |
| <span id="status-text">연결 대기 중</span> | |
| </div> | |
| </div> | |
| <div class="chat-container"> | |
| <div class="chat-messages" id="chat-messages"></div> | |
| </div> | |
| <div class="controls"> | |
| <button id="start-button">대화 시작</button> | |
| </div> | |
| </div> | |
| <audio id="audio-output"></audi |