Upload app.py with huggingface_hub

app.py

@@ -13,43 +13,25 @@ except ImportError:
     from transformers import AutoModelForCausalLM, AutoTokenizer
     print("llama-cpp-python is not installed. Falling back to transformers inference.")
 
-# ---------------------------------------------------------
-# AI Model Initialization
-# ---------------------------------------------------------
 if USE_LLAMA_CPP:
     GGUF_FILENAME = "production_mindmap_model.gguf"
     if os.path.exists(f"./{GGUF_FILENAME}"):
         GGUF_PATH = f"./{GGUF_FILENAME}"
-        print(f"ローカルのモデルを使用します: {GGUF_PATH}")
     else:
         from huggingface_hub import hf_hub_download
         MODEL_REPO_ID = os.environ.get("MODEL_REPO_ID", "kazutab/mindmap-studio-model")
         if not MODEL_REPO_ID:
-            raise ValueError("ローカルにモデルが見つからず、MODEL_REPO_ID環境変数も設定されていません。")
-        print(f"Hugging Face ({MODEL_REPO_ID}) からモデルをダウンロード中...")
+            raise ValueError("Local model not found and MODEL_REPO_ID is not set.")
         GGUF_PATH = hf_hub_download(repo_id=MODEL_REPO_ID, filename="backend/production_mindmap_model.gguf")
     
-    print("Loading AI Model (GGUF) into memory...")
-    model = Llama(
-        model_path=GGUF_PATH,
-        n_ctx=2048,
-        n_gpu_layers=-1 # Use all GPU layers if available
-    )
-    print("AIモデル(GGUF)の起動完了！")
+    model = Llama(model_path=GGUF_PATH, n_ctx=2048, n_gpu_layers=-1)
 else:
     MERGED_MODEL_PATH = "./production_mindmap_model_merged"
-    print("Loading AI Model (Transformers FP16) into memory...")
     tokenizer = AutoTokenizer.from_pretrained(MERGED_MODEL_PATH)
     if tokenizer.pad_token is None:
         tokenizer.pad_token = tokenizer.eos_token
-    
-    model = AutoModelForCausalLM.from_pretrained(
-        MERGED_MODEL_PATH, 
-        torch_dtype=torch.float16, 
-        device_map="auto"
-    )
+    model = AutoModelForCausalLM.from_pretrained(MERGED_MODEL_PATH, torch_dtype=torch.float16, device_map="auto")
     model.eval()
-    print("AIモデル(Transformers)の起動完了！")
 
 STRICT_SYSTEM_PROMPT = """あなたは極めて優秀で厳密な情報抽出アシスタントです。入力文章の論理構造を正確に読み取り、Markdown形式の目次（マインドマップ）を出力してください。
 
@@ -62,12 +44,9 @@ STRICT_SYSTEM_PROMPT = """あなたは極めて優秀で厳密な情報抽出ア
 def generate_mindmap(input_text: str):
     input_text = input_text.strip()
     if not input_text:
-        return "<div style='color: red; padding: 20px;'>文章を入力してください。</div>"
-
-    print(f"推論を開始します（文字数: {len(input_text)}文字）")
+        return ""
 
     USER_PROMPT = f"""以下の文章から論理構造を抽出し、Markdown形式の目次（マインドマップ）を出力してください。
-
 【出力時の厳守ルール（違反厳禁）】
 1. 否定表現の厳守：「〜しない」「過度に依存しない」などの否定表現を絶対に見落とさず、意味を逆転させないこと。
 2. 創作の禁止：記事に明記されていない具体的な行動や予定（例：「〜への参加」「〜の強化を目指す」など）を勝手に推測して付け足さないこと。
@@ -75,205 +54,220 @@ def generate_mindmap(input_text: str):
 
 入力文章:
 {input_text}"""
-    messages = [
-        {"role": "system", "content": STRICT_SYSTEM_PROMPT},
-        {"role": "user", "content": USER_PROMPT}
-    ]
+    messages = [{"role": "system", "content": STRICT_SYSTEM_PROMPT}, {"role": "user", "content": USER_PROMPT}]
     
     if USE_LLAMA_CPP:
         response = model.create_chat_completion(
-            messages=messages,
-            max_tokens=1024,
-            temperature=0.0,
-            repeat_penalty=1.1
+            messages=messages, max_tokens=1024, 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
-        )
+        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,
-                repetition_penalty=1.1,
-                pad_token_id=tokenizer.pad_token_id,
-                eos_token_id=tokenizer.eos_token_id
-            )
-        input_length = inputs["input_ids"].shape[1]
-        generated_tokens = outputs[0][input_length:]
-        generated_markdown = tokenizer.decode(generated_tokens, skip_special_tokens=True).strip()
+            outputs = model.generate(**inputs, max_new_tokens=1024, do_sample=False, repetition_penalty=1.1)
+        generated_markdown = tokenizer.decode(outputs[0][inputs["input_ids"].shape[1]:], skip_special_tokens=True).strip()
     
     generated_markdown = re.sub(r'\s*(#+ )', r'\n\1', generated_markdown).strip()
-    
     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- ')
 
-    # 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
+    return generated_markdown
 
-# ---------------------------------------------------------
-# UI Construction (Native Gradio)
-# ---------------------------------------------------------
-# オリジナルのCSSを読み込み、Gradio用のオーバーライドを追記する
-with open("frontend/style.css", "r", encoding="utf-8") as f:
-    base_css = f.read()
 
-gradio_overrides = """
-/* Gradio特有の不要な余白や枠線を完全に無効化 */
-.gradio-container {
-    max-width: 100% !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    border: none !important;
-    background: transparent !important;
-}
-footer { display: none !important; }
-#root { padding: 0 !important; }
+# -----------------------------------------------------------------------------------------
+# JS / CSS / HTML Injection for 100% Perfect Layout bypass
+# -----------------------------------------------------------------------------------------
 
-/* オリジナルのレイアウトをGradioのRow/Columnに強制適用 */
-.app-layout {
-    gap: 0 !important;
-    flex-wrap: nowrap !important;
-    margin: 0 !important;
-}
-.sidebar {
-    min-width: 360px !important;
-    max-width: 360px !important;
-    padding: 0 !important;
-    border-radius: 0 !important;
-    gap: 0 !important;
-    border-right: 1px solid var(--border-color) !important;
-}
-.sidebar-content {
-    padding: 24px !important;
-    gap: 20px !important;
-}
-.canvas-area {
-    border-radius: 0 !important;
-    border: none !important;
-    padding: 0 !important;
-    margin: 0 !important;
+base_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
+
+:root {
+    --bg-canvas: #fafafa;
+    --bg-sidebar: #ffffff;
+    --border-color: #eaeaea;
+    --text-primary: #171717;
+    --text-secondary: #666666;
+    --text-tertiary: #a1a1aa;
+    --focus-ring: rgba(0, 0, 0, 0.08);
 }
 
-/* Gradioのコンポーネントが勝手に作る枠線を消す */
-.form { border: none !important; background: transparent !important; box-shadow: none !important; }
-.block { padding: 0 !important; margin: 0 !important; border: none !important; box-shadow: none !important; background: transparent !important; }
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body { font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", "Helvetica Neue", sans-serif; color: var(--text-primary); background-color: var(--bg-canvas); height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; }
 
-/* テキストエリアとボタンにオリジナルのスタイルを適用 */
-#text-input textarea {
-    border-radius: 8px !important;
-    height: 100% !important;
-    min-height: 200px !important;
-    border: 1px solid var(--border-color) !important;
-    padding: 16px !important;
-    font-size: 14px !important;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
-}
+.app-layout { display: flex; height: 100vh; width: 100vw; }
 
-button.btn-primary {
-    background-color: #000 !important;
-    color: #fff !important;
-    border-radius: 6px !important;
-    padding: 12px 16px !important;
-    font-size: 14px !important;
-    font-weight: 500 !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    gap: 8px !important;
-}
-button.btn-primary::before {
-    content: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>');
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    margin-right: 4px;
-}
-button.btn-primary:hover {
-    background-color: #333 !important;
+.sidebar { width: 360px; min-width: 360px; max-width: 360px; background-color: var(--bg-sidebar); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; box-shadow: 1px 0 10px rgba(0,0,0,0.02); z-index: 10; }
+.sidebar-header { padding: 24px; border-bottom: 1px solid var(--border-color); }
+.logo { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; letter-spacing: -0.02em; color: #171717; }
+.sidebar-content { flex-grow: 1; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
+.input-group { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
+.input-group label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
+
+textarea.custom-textarea {
+    flex-grow: 1; width: 100%; height: 100%; resize: none; border: 1px solid var(--border-color); border-radius: 8px; padding: 16px; font-family: inherit; font-size: 14px; line-height: 1.6; color: var(--text-primary); background-color: #fff; transition: all 0.2s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.02);
 }
+textarea.custom-textarea:focus { outline: none; border-color: #999; box-shadow: 0 0 0 4px var(--focus-ring); }
+textarea.custom-textarea::placeholder { color: #a1a1aa; }
+
+.btn-primary { background-color: #000; color: #fff; border: none; border-radius: 6px; padding: 12px 16px; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; gap: 8px; }
+.btn-primary:hover { background-color: #333; }
+.btn-primary:active { transform: scale(0.98); }
+.btn-primary:disabled { background-color: #e5e5e5; color: #a3a3a3; cursor: not-allowed; }
+
+#loading { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 13px; color: var(--text-secondary); padding: 12px; }
+.spinner { width: 16px; height: 16px; border: 2px solid var(--border-color); border-top: 2px solid #000; border-radius: 50%; animation: spin 0.8s linear infinite; }
+@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+.hidden { display: none !important; }
+
+.sidebar-footer { padding: 16px 24px; border-top: 1px solid var(--border-color); font-size: 12px; color: var(--text-tertiary); }
+
+.canvas-area { flex-grow: 1; position: relative; background-color: var(--bg-canvas); background-image: radial-gradient(#e5e7eb 1px, transparent 1px); background-size: 20px 20px; }
+#markmap { width: 100%; height: 100%; }
+
+/* Gradio Overrides to remove padding and ensure full screen */
+.gradio-container { padding: 0 !important; margin: 0 !important; max-width: 100vw !important; border: none !important; }
+footer { display: none !important; }
+#hidden-layer { display: none !important; }
 """
 
-custom_css = base_css + "\n" + gradio_overrides
+original_html = """
+<div class="app-layout">
+    <aside class="sidebar">
+        <div class="sidebar-header">
+            <div class="logo">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                <span>MindMap Studio</span>
+            </div>
+        </div>
+        <div class="sidebar-content">
+            <div class="input-group">
+                <label for="inputText">Source Text</label>
+                <textarea id="inputText" class="custom-textarea" placeholder="議事録や講義のテキストをペーストしてください..."></textarea>
+            </div>
+            <button id="generateBtn" class="btn-primary">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>
+                マップを生成
+            </button>
+            <div id="loading" class="hidden">
+                <div class="spinner"></div>
+                <span>Processing text...</span>
+            </div>
+        </div>
+        <div class="sidebar-footer">
+            <p>Powered by edha 1.0 3B</p>
+        </div>
+    </aside>
+    <main class="canvas-area">
+        <svg id="markmap"></svg>
+        <div class="disclaimer" style="position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #a1a1aa; text-align: center; pointer-events: none; z-index: 1000; width: 100%;">
+            MindMap Studioの回答は正しいとは限らないので、重要な情報は必ず見直してください。
+        </div>
+    </main>
+</div>
+"""
 
 head_scripts = """
 <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
+<script src="https://cdn.jsdelivr.net/npm/markmap-lib"></script>
 <script src="https://cdn.jsdelivr.net/npm/markmap-view"></script>
-<script src="https://cdn.jsdelivr.net/npm/markmap-autoloader"></script>
-"""
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+    const { markmap } = window;
+    const { Markmap, loadCSS, loadJS, Transformer } = markmap;
+    const transformer = new Transformer();
+    let mm = null;
 
-with gr.Blocks(css=custom_css, head=head_scripts, title="MindMap Studio") as demo:
-    with gr.Row(elem_classes="app-layout"):
-        with gr.Column(elem_classes="sidebar"):
-            # オリジナルのサイドバーヘッダー（SVGロゴ）を復元
-            gr.HTML("""
-            <div class="sidebar-header" style="padding: 24px;">
-                <div class="logo" style="display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px;">
-                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
-                    <span>MindMap Studio</span>
-                </div>
-            </div>
-            """)
+    // Gradio injects elements dynamically, so we wait until our HTML and Gradio's hidden inputs are ready
+    const initInterval = setInterval(() => {
+        const svgEl = document.querySelector('#markmap');
+        const hiddenBtn = document.querySelector('#hidden-btn');
+        if (svgEl && hiddenBtn && !mm) {
+            clearInterval(initInterval);
+            mm = Markmap.create('#markmap');
+            
+            const initialMarkdown = `
+# マインドマップ自動生成
+## 使い方
+- 左側に文章を入力します
+- 「マップを生成」ボタンを押します
+## 特徴
+- AIが文脈を理解して自動で構造化
+- 専用カスタムAI（edha 1.0 3B）による情報抽出
+`;
+            renderMindMap(initialMarkdown);
+            setupBridge();
+        }
+    }, 100);
+
+    function renderMindMap(markdownContent) {
+        const { root, features } = transformer.transform(markdownContent);
+        const { styles, scripts } = transformer.getUsedAssets(features);
+        if (styles) loadCSS(styles);
+        if (scripts) loadJS(scripts, { getMarkmap: () => markmap });
+        mm.setData(root);
+        mm.fit();
+    }
+
+    function setupBridge() {
+        const generateBtn = document.getElementById('generateBtn');
+        const inputText = document.getElementById('inputText');
+        const loadingDiv = document.getElementById('loading');
+        
+        generateBtn.addEventListener('click', () => {
+            const text = inputText.value.trim();
+            if (!text) return;
             
-            with gr.Column(elem_classes="sidebar-content"):
-                gr.HTML('<div class="input-group"><label style="font-size: 13px; font-weight: 500; color: #666666;">Source Text</label></div>')
-                
-                text_input = gr.Textbox(
-                    lines=10, 
-                    placeholder="議事録や講義のテキストをペーストしてください...",
-                    show_label=False,
-                    container=False,
-                    elem_id="text-input"
-                )
-                
-                submit_btn = gr.Button("マップを生成", elem_classes="btn-primary")
+            generateBtn.disabled = true;
+            generateBtn.classList.add('hidden');
+            loadingDiv.classList.remove('hidden');
             
-            # オリジナルのフッターを復元
-            gr.HTML("""
-            <div class="sidebar-footer" style="padding: 16px 24px; border-top: 1px solid #eaeaea; font-size: 12px; color: #a1a1aa; margin-top: auto;">
-                <p>Powered by edha 1.0 3B</p>
-            </div>
-            """)
+            // Bridge custom textarea to Gradio's hidden textarea
+            const hiddenInput = document.querySelector('#hidden-input textarea');
+            const hiddenBtn = document.querySelector('#hidden-btn');
             
-        with gr.Column(elem_classes="canvas-area"):
-            map_output = gr.HTML(
-                """
-                <div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center;">
-                    <div class="disclaimer" style="position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #a1a1aa; text-align: center; pointer-events: none; z-index: 1000; width: 100%;">
-                        MindMap Studioの回答は正しいとは限らないので、重要な情報は必ず見直してください。
-                    </div>
-                </div>
-                """
-            )
+            if (hiddenInput && hiddenBtn) {
+                hiddenInput.value = text;
+                hiddenInput.dispatchEvent(new Event('input', { bubbles: true }));
+                setTimeout(() => hiddenBtn.click(), 50); // let Svelte process input
+            }
+        });
+        
+        // Listen to changes on Gradio's hidden output
+        const hiddenOutput = document.querySelector('#hidden-output textarea');
+        if (hiddenOutput) {
+            let lastVal = hiddenOutput.value;
+            setInterval(() => {
+                if (hiddenOutput.value !== lastVal) {
+                    lastVal = hiddenOutput.value;
+                    if (lastVal && lastVal.trim().length > 0) {
+                        renderMindMap(lastVal);
+                        
+                        generateBtn.disabled = false;
+                        generateBtn.classList.remove('hidden');
+                        loadingDiv.classList.add('hidden');
+                    }
+                }
+            }, 200);
+        }
+    }
+});
+</script>
+"""
 
-    submit_btn.click(
-        fn=generate_mindmap, 
-        inputs=text_input, 
-        outputs=map_output,
-        api_name="generate"
-    )
+with gr.Blocks(css=base_css, head=head_scripts, title="MindMap Studio") as demo:
+    # 完全にオリジナルのUIをインジェクト（Gradioのコンテナ制限を受けない純粋なHTML文字列）
+    gr.HTML(original_html)
+    
+    # Python関数の実行に必要なGradioコンポーネント（目に見えないように隠蔽）
+    with gr.Row(elem_id="hidden-layer"):
+        hidden_input = gr.Textbox(elem_id="hidden-input")
+        hidden_output = gr.Textbox(elem_id="hidden-output")
+        hidden_btn = gr.Button(elem_id="hidden-btn")
+        
+    hidden_btn.click(fn=generate_mindmap, inputs=hidden_input, outputs=hidden_output, api_name="generate")
 
 demo.launch()