Upload app.py with huggingface_hub

app.py

@@ -140,57 +140,139 @@ def generate_mindmap(input_text: str):
 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;
+/* 全体のリセットとフルスクリーン化 */
+body, html {
+    margin: 0 !important;
+    padding: 0 !important;
+    height: 100vh !important;
+    overflow: hidden !important;
+    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", "Roboto", "Helvetica Neue", sans-serif !important;
     background-color: #fafafa !important;
+    color: #171717 !important;
 }
 
-/* GradioのデフォルトUIを上書きしてガラス風のプレミアムデザインにする */
+/* Gradioのコンテナ制限を解除 */
 .gradio-container {
-    max-width: 1200px !important;
-    margin: 0 auto !important;
-    padding: 24px !important;
+    max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    height: 100vh !important;
+    border: none !important;
+    background: transparent !important;
+}
+
+/* フッターを隠す */
+footer { display: none !important; }
+
+/* 兄弟要素の隙間を消す */
+.gap { gap: 0 !important; }
+.wrap { padding: 0 !important; }
+.contain { padding: 0 !important; margin: 0 !important; }
+div.svelte-1y5yiv1 { padding: 0 !important; }
+.svelte-1y5yiv1 { padding: 0 !important; }
+
+/* メインレイアウト（RowをFlexにする） */
+#main-row {
+    height: 100vh !important;
+    width: 100vw !important;
+    margin: 0 !important;
+    flex-wrap: nowrap !important;
+    display: flex !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;
+    width: 360px !important;
+    min-width: 360px !important;
+    max-width: 360px !important;
+    height: 100vh !important;
+    background-color: #ffffff !important;
+    border-right: 1px solid #eaeaea !important;
+    border-radius: 0 !important;
+    padding: 24px !important;
+    box-shadow: 1px 0 10px rgba(0,0,0,0.02) !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 20px !important;
+    overflow-y: auto !important;
 }
 
+/* キャンバスエリア */
 #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);
+    flex-grow: 1 !important;
+    height: 100vh !important;
+    background-color: #fafafa !important;
+    border-radius: 0 !important;
+    border: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    background-image: radial-gradient(#e5e7eb 1px, transparent 1px) !important;
+    background-size: 20px 20px !important;
+    position: relative !important;
+    overflow: hidden !important;
+}
+
+/* テキストの色を強制的に黒・グレーにする（ダークモードの影響を排除） */
+#sidebar h2, #sidebar p, #sidebar span {
+    color: #171717 !important;
+}
+
+#sidebar p {
+    color: #666666 !important;
+    font-size: 14px !important;
+}
+
+/* テキストエリアのスタイリング */
+#input-box textarea {
+    background-color: #ffffff !important;
+    color: #171717 !important;
+    border: 1px solid #eaeaea !important;
+    border-radius: 8px !important;
+    padding: 16px !important;
+    font-family: inherit !important;
+    font-size: 14px !important;
+    line-height: 1.6 !important;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
+    resize: none !important;
+    height: 200px !important;
+}
+
+#input-box textarea:focus {
+    border-color: #999 !important;
+    box-shadow: 0 0 0 4px rgba(0,0,0,0.08) !important;
+    outline: none !important;
+}
+
+#input-box textarea::placeholder {
+    color: #a1a1aa !important;
 }
 
+#input-box label span {
+    color: #666666 !important;
+    font-weight: 500 !important;
+    font-size: 13px !important;
+}
+
+/* ボタンのスタイリング */
 .submit-btn {
     background: #000000 !important;
     color: #ffffff !important;
-    border-radius: 8px !important;
+    border-radius: 6px !important;
     font-weight: 500 !important;
-    padding: 12px !important;
+    padding: 12px 16px !important;
     border: none !important;
     transition: all 0.2s ease !important;
+    margin-top: 10px !important;
 }
 
 .submit-btn:hover {
     background: #333333 !important;
-    transform: translateY(-1px);
+    transform: translateY(-1px) !important;
 }
 
-textarea {
-    border-radius: 8px !important;
-    border: 1px solid #eaeaea !important;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.02) !important;
-}
+/* 隠しラベルなどを非表示 */
+.form { border: none !important; background: transparent !important; box-shadow: none !important; }
+.block { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
 """
 
 head_scripts = """
@@ -199,23 +281,23 @@ head_scripts = """
 <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*")
+with gr.Blocks(css=custom_css, head=head_scripts, title="MindMap Studio") as demo:
+    with gr.Row(elem_id="main-row"):
+        with gr.Column(elem_id="sidebar"):
+            gr.Markdown("<h2 style='color: #171717; font-weight: 600; font-size: 20px; margin-bottom: 8px;'>🧠 MindMap Studio</h2>")
+            gr.Markdown("<p style='color: #666666; font-size: 14px; margin-bottom: 20px;'>AIが入力された文章を分析し、論理的なマインドマップを自動生成します。</p>")
             
             text_input = gr.Textbox(
-                lines=12, 
+                lines=10, 
                 label="入力文章", 
                 placeholder="ここに議事録やニュース記事を入力してください...",
                 elem_id="input-box"
             )
             submit_btn = gr.Button("マインドマップを生成", elem_classes="submit-btn")
             
-        with gr.Column(scale=7, elem_id="canvas"):
+        with gr.Column(elem_id="canvas"):
             map_output = gr.HTML(
-                "<div style='text-align:center; padding-top:200px; color:#a1a1aa; font-weight: 500;'>ここにマインドマップが表示されます</div>"
+                "<div style='width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; color: #a1a1aa; font-weight: 500;'>ここにマインドマップが表示されます</div>"
             )
 
     submit_btn.click(