Fix permissions issues on HuggingFace Space: Add fallback UI options

Dockerfile

@@ -18,8 +18,8 @@ COPY proxy.py /app/
 COPY .space/hf-space.sh /app/
 
 # Создаем директории
-RUN mkdir -p /tmp/ten_user/agents /tmp/ten_user/logs /app/backup
-RUN chmod -R 777 /tmp /app/backup
+RUN mkdir -p /tmp/ten_user/agents /tmp/ten_user/logs /app/backup /tmp/ten_playground
+RUN chmod -R 777 /tmp/ten_playground
 
 # Создаем и активируем виртуальную среду Python
 RUN python3 -m venv /app/venv
@@ -38,12 +38,8 @@ RUN mkdir -p /app/playground
 RUN cp -r /tmp/ten-agent/playground/* /app/playground/
 RUN rm -rf /tmp/ten-agent
 
-# Устанавливаем pnpm
-RUN npm install -g pnpm@8
-
-# Устанавливаем dependencies для playground
-WORKDIR /app/playground
-RUN pnpm install
+# Устанавливаем pnpm и next глобально для использования с npx
+RUN npm install -g pnpm@8 next@latest
 
 # Возвращаемся в основную директорию
 WORKDIR /app

app.py

@@ -240,6 +240,31 @@ def start_playground():
     """Запускает Playground UI через Next.js"""
     print("Запуск Playground UI...")
     
+    # Создаем директорию для Next.js в /tmp, где у нас есть права на запись
+    tmp_playground_dir = Path("/tmp/ten_playground")
+    if not tmp_playground_dir.exists():
+        print(f"Создаем временную директорию для Next.js: {tmp_playground_dir}")
+        tmp_playground_dir.mkdir(exist_ok=True, parents=True)
+    
+    # Копируем необходимые файлы из /app/playground в /tmp/ten_playground
+    print("Копируем файлы Next.js приложения во временную директорию...")
+    try:
+        os.system(f"cp -r /app/playground/app /tmp/ten_playground/")
+        os.system(f"cp -r /app/playground/public /tmp/ten_playground/")
+        os.system(f"cp /app/playground/package.json /tmp/ten_playground/")
+        os.system(f"cp /app/playground/next.config.mjs /tmp/ten_playground/")
+        os.system(f"cp /app/playground/tailwind.config.js /tmp/ten_playground/")
+        os.system(f"cp /app/playground/postcss.config.js /tmp/ten_playground/")
+        
+        # Проверяем, что файлы скопировались
+        if not (tmp_playground_dir / "app").exists():
+            print("Не удалось скопировать файлы Next.js. Создаем простое приложение...")
+            create_simple_next_app(tmp_playground_dir)
+    except Exception as e:
+        print(f"Ошибка при копировании файлов: {e}")
+        print("Создаем простое приложение Next.js...")
+        create_simple_next_app(tmp_playground_dir)
+    
     # Устанавливаем переменные окружения
     ui_env = os.environ.copy()
     ui_env["PORT"] = str(NEXTJS_PORT)
@@ -254,8 +279,8 @@ def start_playground():
         # Отключаем строгие проверки CORS для работы в iframe
         ui_env["NEXT_PUBLIC_DISABLE_CORS"] = "true"
     
-    # Запускаем UI
-    ui_cmd = "cd playground && npm run dev"
+    # Запускаем UI из временной директории, где у нас есть права на запись
+    ui_cmd = f"cd {tmp_playground_dir} && npx next dev"
     print(f"Running UI command: {ui_cmd}")
     ui_process = subprocess.Popen(
         ui_cmd,
@@ -293,7 +318,7 @@ def create_interface():
     """Создает Gradio интерфейс для редиректа"""
     with gr.Blocks() as demo:
         gr.Markdown("# TEN Agent на Hugging Face Space")
-        gr.Markdown("## Загрузка приложения...")
+        gr.Markdown("## Управление и мониторинг")
         
         # Статус серверов
         status_md = gr.Markdown("### Статус: Инициализация...")
@@ -302,40 +327,76 @@ def create_interface():
             col1, col2 = gr.Column(), gr.Column()
             
             with col1:
-                # Кнопка для открытия UI в iframe
-                open_iframe = gr.Button("Показать TEN Agent в iframe")
+                # Информация об API сервере
+                gr.Markdown(f"""
+                ### API сервер
+                
+                API сервер работает по адресу: http://{INTERNAL_HOST}:{API_PORT}
+                
+                Доступные эндпоинты:
+                - `/graphs` - Список доступных графов
+                - `/health` - Статус API сервера
+                """)
+                
+                # Кнопка для проверки API
+                check_api_btn = gr.Button("Проверить API сервер")
+                api_result = gr.JSON(label="Результат запроса к API")
+                
+                def check_api():
+                    try:
+                        import requests
+                        response = requests.get(f"http://{INTERNAL_HOST}:{API_PORT}/health")
+                        return response.json()
+                    except Exception as e:
+                        return {"status": "error", "message": str(e)}
+                
+                check_api_btn.click(check_api, outputs=api_result)
+            
+            with col2:
+                # Информация о UI сервере
+                gr.Markdown(f"""
+                ### UI сервер
+                
+                UI сервер доступен по адресу: {UI_URL}
+                
+                <a href="{UI_URL}" target="_blank" style="display: inline-block; padding: 10px 15px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 4px; margin: 10px 0;">Открыть UI в новой вкладке</a>
+                """)
                 
                 # Функция для открытия UI в iframe
+                iframe_btn = gr.Button("Показать UI в iframe")
+                
                 def show_iframe():
                     return f"""
                     <div style="border: 1px solid #ccc; padding: 10px; border-radius: 5px;">
-                        <iframe src="{UI_URL}" width="100%" height="600px" frameborder="0"></iframe>
+                        <iframe src="{UI_URL}" width="100%" height="500px" frameborder="0"></iframe>
                     </div>
                     """
                 
                 iframe_area = gr.HTML()
-                open_iframe.click(show_iframe, outputs=iframe_area)
+                iframe_btn.click(show_iframe, outputs=iframe_area)
+        
+        # Ссылки на документацию и важные настройки
+        with gr.Accordion("Инструкции", open=False):
+            gr.Markdown("""
+            ### Важные настройки
             
-            with col2:
-                # Ссылка на UI
-                gr.Markdown(f"""
-                ### Открыть TEN Agent в новой вкладке:
-                
-                <a href="{UI_URL}" target="_blank" style="display: inline-block; padding: 10px 15px; background-color: #4CAF50; color: white; text-decoration: none; border-radius: 4px; margin: 10px 0;">Открыть TEN Agent UI</a>
-                
-                ### ВАЖНО:
-                
-                Настройте API ключи в интерфейсе для полноценной работы:
-                - OpenAI API Key
-                - ElevenLabs API Key
-                - Deepgram API Key
-                - Agora App ID и Certificate
-                """)
+            Для полноценной работы необходимо настроить следующие API ключи:
+            
+            1. **OpenAI API Key** - для работы с языковыми моделями
+            2. **Deepgram API Key** - для распознавания речи
+            3. **ElevenLabs API Key** - для синтеза речи
+            4. **Agora App ID и Certificate** - для работы с RTC
+            
+            ### Доступные графы
+            
+            1. **Voice Agent** - Голосовой агент с OpenAI и ElevenLabs
+            2. **Chat Agent** - Текстовый чат с OpenAI
+            """)
         
         # Статус серверов и логи
-        with gr.Accordion("Системная информация", open=False):
-            api_status = gr.Textbox(label="Статус API сервера", value="Запускается...", interactive=False)
-            ui_status = gr.Textbox(label="Статус UI сервера", value="Запускается...", interactive=False)
+        with gr.Accordion("Статус системы", open=False):
+            api_status = gr.Textbox(label="Статус API сервера", value="Проверка...", interactive=False)
+            ui_status = gr.Textbox(label="Статус UI сервера", value="Проверка...", interactive=False)
             
             # Функция обновления статуса
             def update_status():
@@ -346,6 +407,9 @@ def create_interface():
             
             status_btn = gr.Button("Обновить статус")
             status_btn.click(update_status, outputs=[api_status, ui_status, status_md])
+            
+            # Обновляем статус при загрузке
+            demo.load(update_status, outputs=[api_status, ui_status, status_md])
     
     return demo
 
@@ -359,6 +423,199 @@ def is_port_in_use(port):
         except:
             return False
 
+def create_simple_next_app(target_dir):
+    """Создает простое Next.js приложение в указанной директории"""
+    print(f"Создание простого Next.js приложения в {target_dir}")
+    
+    # Создаем базовую структуру Next.js приложения
+    app_dir = target_dir / "app"
+    app_dir.mkdir(exist_ok=True, parents=True)
+    
+    # Создаем простой package.json
+    package_json = {
+        "name": "ten-agent-simple-ui",
+        "version": "0.1.0",
+        "private": True,
+        "scripts": {
+            "dev": "next dev",
+            "build": "next build",
+            "start": "next start"
+        },
+        "dependencies": {
+            "next": "latest",
+            "react": "latest",
+            "react-dom": "latest"
+        }
+    }
+    
+    with open(target_dir / "package.json", "w") as f:
+        json.dump(package_json, f, indent=2)
+    
+    # Создаем простой next.config.js
+    next_config = """/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig
+"""
+    
+    with open(target_dir / "next.config.js", "w") as f:
+        f.write(next_config)
+    
+    # Создаем простую страницу
+    page_content = """export default function Home() {
+  return (
+    <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
+      <h1>TEN Agent UI</h1>
+      <p>API server is running at: <a href="http://localhost:8080">http://localhost:8080</a></p>
+      
+      <div style={{ marginTop: '20px', padding: '10px', backgroundColor: '#f0f0f0', borderRadius: '5px' }}>
+        <p>API endpoints:</p>
+        <ul>
+          <li><a href="http://localhost:8080/graphs">/graphs</a> - Available graphs</li>
+          <li><a href="http://localhost:8080/health">/health</a> - API server status</li>
+        </ul>
+      </div>
+      
+      <div style={{ marginTop: '20px' }}>
+        <button 
+          style={{ 
+            padding: '10px 15px', 
+            backgroundColor: '#4CAF50', 
+            color: 'white',
+            border: 'none',
+            borderRadius: '5px',
+            cursor: 'pointer'
+          }}
+          onClick={() => window.location.href = 'http://localhost:8080/graphs'}
+        >
+          Go to API
+        </button>
+      </div>
+    </div>
+  );
+}
+"""
+    
+    with open(app_dir / "page.js", "w") as f:
+        f.write(page_content)
+    
+    # Создаем простой layout.js
+    layout_content = """export const metadata = {
+  title: 'TEN Agent',
+  description: 'Simple UI for TEN Agent',
+}
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
+"""
+    
+    with open(app_dir / "layout.js", "w") as f:
+        f.write(layout_content)
+    
+    print(f"Простое Next.js приложение создано в {target_dir}")
+
+def start_simple_ui():
+    """Запускает простой HTTP сервер для UI"""
+    print("Запуск простого HTTP сервера...")
+    
+    # Создаем директорию для UI
+    simple_ui_dir = Path("/tmp/ten_ui")
+    simple_ui_dir.mkdir(exist_ok=True, parents=True)
+    
+    # Создаем простую HTML страницу
+    html_content = """<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TEN Agent Simple UI</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .card {
+            background-color: #f5f5f5;
+            border-radius: 8px;
+            padding: 16px;
+            margin-bottom: 16px;
+        }
+        button {
+            background-color: #4CAF50;
+            border: none;
+            color: white;
+            padding: 10px 15px;
+            text-align: center;
+            text-decoration: none;
+            display: inline-block;
+            font-size: 16px;
+            margin: 4px 2px;
+            cursor: pointer;
+            border-radius: 4px;
+        }
+        a {
+            color: #0066cc;
+        }
+    </style>
+</head>
+<body>
+    <h1>TEN Agent UI</h1>
+    <div class="card">
+        <h2>API Server</h2>
+        <p>API сервер работает по адресу: <a href="http://localhost:8080" target="_blank">http://localhost:8080</a></p>
+        <p>Доступные эндпоинты:</p>
+        <ul>
+            <li><a href="http://localhost:8080/graphs" target="_blank">/graphs</a> - Список доступных графов</li>
+            <li><a href="http://localhost:8080/health" target="_blank">/health</a> - Статус API сервера</li>
+        </ul>
+    </div>
+    
+    <div class="card">
+        <h2>Запуск сессии</h2>
+        <p>Для запуска сессии можно использовать API вручную:</p>
+        <pre>curl -X POST http://localhost:8080/start -H "Content-Type: application/json" -d '{"graph_file":"voice_agent.json"}'</pre>
+    </div>
+</body>
+</html>
+"""
+    
+    with open(simple_ui_dir / "index.html", "w") as f:
+        f.write(html_content)
+    
+    # Запускаем простой HTTP сервер на порту 3000
+    server_cmd = f"cd {simple_ui_dir} && python -m http.server {NEXTJS_PORT}"
+    print(f"Running simple HTTP server: {server_cmd}")
+    
+    server_process = subprocess.Popen(
+        server_cmd,
+        shell=True,
+        stdout=subprocess.PIPE,
+        stderr=subprocess.PIPE
+    )
+    
+    # Ждем запуска сервера
+    time.sleep(2)
+    
+    # Проверяем, что процесс не упал
+    if server_process.poll() is not None:
+        stdout, stderr = server_process.communicate()
+        print(f"Простой HTTP сервер не запустился!")
+        print(f"STDOUT: {stdout.decode()}")
+        print(f"STDERR: {stderr.decode()}")
+        return None
+    
+    print(f"Простой HTTP сервер запущен и слушает на порту {NEXTJS_PORT}")
+    return server_process
+
 def main():
     # Создаем директории и файлы конфигурации
     create_directories()
@@ -370,12 +627,16 @@ def main():
         print("Не удалось запустить API сервер")
         return
     
-    # Запускаем Playground UI
+    # Пробуем запустить Playground UI через Next.js
     ui_process = start_playground()
+    
+    # Если запуск через Next.js не удался, пробуем запустить простой HTTP сервер
     if not ui_process:
-        print("Не удалось запустить Playground UI")
-        api_process.terminate()
-        return
+        print("Не удалось запустить Playground UI через Next.js, пробуем простой HTTP сервер...")
+        ui_process = start_simple_ui()
+        
+        if not ui_process:
+            print("Не удалось запустить ни один UI сервер. Продолжаем только с API сервером.")
     
     # Создаем Gradio интерфейс
     demo = create_interface()
@@ -388,19 +649,21 @@ def main():
         while True:
             if api_process.poll() is not None:
                 print("API сервер остановлен")
-                ui_process.terminate()
+                if ui_process and ui_process.poll() is None:
+                    ui_process.terminate()
                 break
             
-            if ui_process.poll() is not None:
-                print("UI остановлен")
-                api_process.terminate()
-                break
+            if ui_process and ui_process.poll() is not None:
+                print("UI сервер остановлен, пробуем перезапустить...")
+                # Пробуем запустить простой HTTP сервер, если UI процесс упал
+                ui_process = start_simple_ui()
             
             time.sleep(1)
     except KeyboardInterrupt:
         print("Принудительная остановка...")
         api_process.terminate()
-        ui_process.terminate()
+        if ui_process:
+            ui_process.terminate()
 
 if __name__ == "__main__":
     # Корректная обработка сигналов

simple_next_app.js

@@ -0,0 +1,34 @@
+// File: /tmp/ten_playground/app/page.js
+// Simple Next.js app that redirects to API server
+export default function Home() {
+    return (
+        <div style={{ padding: '20px', fontFamily: 'Arial, sans-serif' }}>
+            <h1>TEN Agent UI Loader</h1>
+            <p>API server is running at: <a href="http://localhost:8080">http://localhost:8080</a></p>
+
+            <div style={{ marginTop: '20px', padding: '10px', backgroundColor: '#f0f0f0', borderRadius: '5px' }}>
+                <p>Используйте API напрямую:</p>
+                <ul>
+                    <li><a href="http://localhost:8080/graphs">/graphs</a> - Список доступных графов</li>
+                    <li><a href="http://localhost:8080/health">/health</a> - Статус API сервера</li>
+                </ul>
+            </div>
+
+            <div style={{ marginTop: '20px' }}>
+                <button
+                    style={{
+                        padding: '10px 15px',
+                        backgroundColor: '#4CAF50',
+                        color: 'white',
+                        border: 'none',
+                        borderRadius: '5px',
+                        cursor: 'pointer'
+                    }}
+                    onClick={() => window.location.href = 'http://localhost:8080/graphs'}
+                >
+                    Перейти к API
+                </button>
+            </div>
+        </div>
+    );
+} 

start.sh

@@ -14,11 +14,17 @@ else
     PYTHON_CMD="python3"
 fi
 
-# Создаем необходимые директории
+# Создаем необходимые директории без изменения прав
 echo "Creating temporary directories in /tmp..."
 mkdir -p /tmp/ten_user/agents
 mkdir -p /tmp/ten_user/logs
-chmod -R 777 /tmp/ten_user
+mkdir -p /tmp/ten_playground
+
+# Проверяем, что директории созданы
+echo "Checking directories..."
+if [ -d "/tmp/ten_user" ]; then
+    echo "✅ /tmp/ten_user exists"
+fi
 
 # Проверяем наличие файлов
 echo "Checking necessary files..."