Upload app.py with huggingface_hub

app.py

@@ -1,11 +1,7 @@
-from fastapi import FastAPI, HTTPException
-from fastapi.middleware.cors import CORSMiddleware
-from pydantic import BaseModel
-from fastapi.responses import FileResponse
-from fastapi.staticfiles import StaticFiles
 import os
 import re
 import gradio as gr
+import spaces
 
 try:
     from llama_cpp import Llama
@@ -17,30 +13,10 @@ except ImportError:
     from transformers import AutoModelForCausalLM, AutoTokenizer
     print("llama-cpp-python is not installed. Falling back to transformers inference.")
 
-app = FastAPI()
-
-# CORS configuration to allow the frontend to communicate with this API
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],  # Allows all origins for local development
-    allow_credentials=True,
-    allow_methods=["*"],  # Allows all methods
-    allow_headers=["*"],  # Allows all headers
-)
-
-class TextRequest(BaseModel):
-    text: str
-
-class MapResponse(BaseModel):
-    markdown: str
-
 # ---------------------------------------------------------
-# AI Model Initialization (Phase 5)
+# AI Model Initialization
 # ---------------------------------------------------------
-
 if USE_LLAMA_CPP:
-    import os
-    
     GGUF_FILENAME = "production_mindmap_model.gguf"
     if os.path.exists(f"./{GGUF_FILENAME}"):
         GGUF_PATH = f"./{GGUF_FILENAME}"
@@ -82,19 +58,14 @@ STRICT_SYSTEM_PROMPT = """あなたは極めて優秀で厳密な情報抽出ア
 2. ただし、情報を階層化して分かりやすく整理するための「一般的なカテゴリ名（例：背景、特徴、課題、概要など）」を親見出しとして補足することは許可します。
 3. あなたの推測や外部知識を一切混ぜず、入力文章内の事実のみを構造化してください。"""
 
-import spaces
-
-@app.post("/generate", response_model=MapResponse)
 @spaces.GPU(duration=120)
-def generate_mindmap(request: TextRequest):
-    input_text = request.text.strip()
+def generate_mindmap(input_text: str):
+    input_text = input_text.strip()
     if not input_text:
-        raise HTTPException(status_code=400, detail="Text is empty")
+        return "<div style='color: red; padding: 20px;'>文章を入力してください。</div>"
 
-    print(f"APIリクエストを受信しました（文字数: {len(input_text)}文字）")
-    print("AIが推論（Markdown構造）を生成中...")
+    print(f"推論を開始します（文字数: {len(input_text)}文字）")
 
-    # Qwen用のチャットプロンプト構築
     USER_PROMPT = f"""以下の文章から論理構造を抽出し、Markdown形式の目次（マインドマップ）を出力してください。
 
 【出力時の厳守ルール（違反厳禁）】
@@ -113,81 +84,145 @@ def generate_mindmap(request: TextRequest):
         response = model.create_chat_completion(
             messages=messages,
             max_tokens=1024,
-            temperature=0.0, # Greedy Decoding (推測・創造を完全に排除)
+            temperature=0.0,
             repeat_penalty=1.1
         )
         generated_markdown = response['choices'][0]['message']['content'].strip()
     else:
-        # トークナイザーでプロンプト化
         prompt = tokenizer.apply_chat_template(
             messages, 
             tokenize=False, 
             add_generation_prompt=True
         )
-        
         inputs = tokenizer(prompt, return_tensors="pt").to(model.device)
-        
         with torch.no_grad():
             outputs = model.generate(
                 **inputs,
-                max_new_tokens=1024, # 新しく生成するトークン数の上限
-                do_sample=False,     # Greedy Decoding を有効化
+                max_new_tokens=1024,
+                do_sample=False,
                 repetition_penalty=1.1,
                 pad_token_id=tokenizer.pad_token_id,
                 eos_token_id=tokenizer.eos_token_id
             )
-        
-        # 4. 入力プロンプト部分を切り落として、新しく生成された部分だけを取り出す
         input_length = inputs["input_ids"].shape[1]
         generated_tokens = outputs[0][input_length:]
-        
-        # 5. 数値（トークン）を人間が読めるMarkdownテキストにデコード
         generated_markdown = tokenizer.decode(generated_tokens, skip_special_tokens=True).strip()
     
-    # 【超重要】T5トークナイザーが改行(\n)を消してしまう問題の対策
-    # 見出し記号（#）の前に強制的に改行を挿入して、Markmapが認識できるようにする
     generated_markdown = re.sub(r'\s*(#+ )', r'\n\1', generated_markdown).strip()
     
-    # Markmapは必ず「#（大見出し）」から始まる必要があるため、存在しない場合は強制付与
     if not generated_markdown.startswith('#'):
         if '##' in generated_markdown or '###' in generated_markdown:
             generated_markdown = "# マインドマップ\n" + generated_markdown
         else:
             generated_markdown = "# マインドマップ\n## 抽出結果\n- " + generated_markdown.replace('\n', '\n- ')
 
-    print("生成が完了しました！ (コンソール出力時の文字化けエラーを防ぐため内容の表示を省略します)")
-    
-    return MapResponse(markdown=generated_markdown)
-
-# フロントエンドの静的ファイルをマウント
-app.mount("/assets", StaticFiles(directory="frontend"), name="assets")
-
-@app.get("/")
-async def root():
-    # ルートURLにアクセスされたらフロントエンドのindex.htmlを返す
-    return FileResponse("frontend/index.html")
-
-@app.get("/{filename}")
-async def get_frontend_file(filename: str):
-    # app.js や style.css などのファイルを返す
-    file_path = os.path.join("frontend", filename)
-    if os.path.exists(file_path):
-        return FileResponse(file_path)
-    raise HTTPException(status_code=404, detail="File not found")
-
-    raise HTTPException(status_code=404, detail="File not found")
+    # Markmap 用のHTMLを動的に構築して返す
+    html_output = f"""
+    <div class="markmap" style="width: 100%; height: 100%; min-height: 500px;">
+      <script type="text/template">
+      {generated_markdown}
+      </script>
+    </div>
+    <script>
+      // GradioのHTML更新後にMarkmapを強制再レンダリングする
+      setTimeout(() => {{
+          if (window.markmap && window.markmap.autoLoader) {{
+              window.markmap.autoLoader.renderAll();
+          }}
+      }}, 100);
+    </script>
+    """
+    return html_output
 
 # ---------------------------------------------------------
-# HF ZeroGPU Gradio Wrapper (The Final Hack)
+# UI Construction (Native Gradio)
 # ---------------------------------------------------------
-# ZeroGPU REQUIRES a Gradio app to exist, so we mount a dummy one.
-@spaces.GPU(duration=120)
-def dummy_gpu_task(*args, **kwargs):
-    return "dummy"
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;
+    background-color: #fafafa !important;
+}
+
+/* GradioのデフォルトUIを上書きしてガラス風のプレミアムデザインにする */
+.gradio-container {
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+    padding: 24px !important;
+}
+
+#sidebar {
+    background-color: #ffffff;
+    border-radius: 12px;
+    padding: 24px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
+    border: 1px solid #eaeaea;
+}
+
+#canvas {
+    background-color: #fafafa;
+    border-radius: 12px;
+    padding: 24px;
+    border: 1px solid #eaeaea;
+    background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
+    background-size: 20px 20px;
+    min-height: 600px;
+    box-shadow: inset 0 2px 10px rgba(0,0,0,0.02);
+}
+
+.submit-btn {
+    background: #000000 !important;
+    color: #ffffff !important;
+    border-radius: 8px !important;
+    font-weight: 500 !important;
+    padding: 12px !important;
+    border: none !important;
+    transition: all 0.2s ease !important;
+}
+
+.submit-btn:hover {
+    background: #333333 !important;
+    transform: translateY(-1px);
+}
+
+textarea {
+    border-radius: 8px !important;
+    border: 1px solid #eaeaea !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
+}
+"""
+
+head_scripts = """
+<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
+<script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>
+<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script>
+"""
+
+with gr.Blocks(css=custom_css, head=head_scripts, theme=gr.themes.Default(primary_hue="zinc")) as demo:
+    with gr.Row():
+        with gr.Column(scale=3, elem_id="sidebar"):
+            gr.Markdown("## 🧠 MindMap Studio")
+            gr.Markdown("AIが入力された文章を分析し、論理的なマインドマップを自動生成します。\n\n*Hugging Face ZeroGPU Native Version*")
+            
+            text_input = gr.Textbox(
+                lines=12, 
+                label="入力文章", 
+                placeholder="ここに議事録やニュース記事を入力してください...",
+                elem_id="input-box"
+            )
+            submit_btn = gr.Button("マインドマップを生成", elem_classes="submit-btn")
+            
+        with gr.Column(scale=7, elem_id="canvas"):
+            map_output = gr.HTML(
+                "<div style='text-align:center; padding-top:200px; color:#a1a1aa; font-weight: 500;'>ここにマインドマップが表示されます</div>"
+            )
 
-demo = gr.Interface(fn=dummy_gpu_task, inputs="text", outputs="text")
-app = gr.mount_gradio_app(app, demo, path="/dummy_gradio")
+    submit_btn.click(
+        fn=generate_mindmap, 
+        inputs=text_input, 
+        outputs=map_output,
+        api_name="generate"
+    )
 
-if __name__ == "__main__":
-    import uvicorn
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+demo.launch()