Spaces:

kazutab
/

mindmap-studio

Running on Zero

App Files Files Community

kazutab commited on 1 day ago

Commit

8db8202

verified ·

1 Parent(s): bfc04c7

Upload folder using huggingface_hub

Browse files

Files changed (3) hide show

frontend/app.js +88 -0
frontend/index.html +55 -0
frontend/style.css +238 -0

frontend/app.js ADDED Viewed

	@@ -0,0 +1,88 @@

+// Ensure Markmap libraries are loaded from CDN
+const { markmap } = window;
+const { Markmap, loadCSS, loadJS } = markmap;
+const { Transformer } = window.markmap;
+// Create Transformer instance
+const transformer = new Transformer();
+// Initialize Markmap on the SVG element
+let mm;
+document.addEventListener('DOMContentLoaded', () => {
+    mm = Markmap.create('#markmap');
+    // Initial dummy data to show something beautiful right away
+    const initialMarkdown = `
+# マインドマップ自動生成
+## 使い方
+- 左側に文章を入力します
+- 「マップを生成」ボタンを押します
+## 特徴
+- AIが文脈を理解して自動で構造化
+- 専用カスタムAI（edha 1.0 3B）による情報抽出
+`;
+    renderMindMap(initialMarkdown);
+});
+// Function to render Markdown to MindMap
+function renderMindMap(markdownContent) {
+    // 1. Transform markdown to Markmap internal format
+    const { root, features } = transformer.transform(markdownContent);
+    // 2. Load necessary assets for features (like Katex or highlight.js) if used
+    const { styles, scripts } = transformer.getUsedAssets(features);
+    if (styles) loadCSS(styles);
+    if (scripts) loadJS(scripts, { getMarkmap: () => markmap });
+    // 3. Update the Markmap instance with new data
+    mm.setData(root);
+    mm.fit(); // Automatically fit to screen
+}
+// Event Listeners
+const generateBtn = document.getElementById('generateBtn');
+const inputText = document.getElementById('inputText');
+const loadingDiv = document.getElementById('loading');
+generateBtn.addEventListener('click', async () => {
+    const text = inputText.value.trim();
+    if (!text) {
+        alert("Please enter some text to generate a map.");
+        return;
+    }
+    // Show loading
+    generateBtn.disabled = true;
+    generateBtn.classList.add('hidden');
+    loadingDiv.classList.remove('hidden');
+    try {
+        // --- PHASE 3: Real API Call ---
+        console.log("Sending request to backend...");
+        const response = await fetch('/generate', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({ text: text })
+        });
+        if (!response.ok) {
+            throw new Error('API error: ' + response.status);
+        }
+        const data = await response.json();
+        console.log("✅ RAW BACKEND RESPONSE:", data.markdown);
+        // Render the Markdown returned by the Python backend
+        renderMindMap(data.markdown);
+    } catch (error) {
+        alert("Error occurred: " + error.message);
+    } finally {
+        // Hide loading
+        generateBtn.disabled = false;
+        generateBtn.classList.remove('hidden');
+        loadingDiv.classList.add('hidden');
+    }
+});

frontend/index.html ADDED Viewed

	@@ -0,0 +1,55 @@

+<!DOCTYPE html>
+<html lang="ja">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MindMap Studio</title>
+    <link rel="stylesheet" href="style.css?v=3">
+    <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>
+</head>
+<body>
+    <div class="app-layout">
+        <!-- Sidebar -->
+        <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" 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 Canvas -->
+        <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>
+    <script src="app.js?v=3"></script>
+</body>
+</html>

frontend/style.css ADDED Viewed

	@@ -0,0 +1,238 @@

+@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);
+}
+* {
+    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;
+}
+.app-layout {
+    display: flex;
+    height: 100vh;
+    width: 100vw;
+}
+/* Sidebar Styling (Vercel/Linear Style) */
+.sidebar {
+    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;
+}
+.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 {
+    flex-grow: 1;
+    width: 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:focus {
+    outline: none;
+    border-color: #999;
+    box-shadow: 0 0 0 4px var(--focus-ring);
+}
+textarea::placeholder {
+    color: #a1a1aa;
+}
+/* Minimalist Black Button */
+.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 State */
+#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 */
+.canvas-area {
+    flex-grow: 1;
+    position: relative;
+    background-color: var(--bg-canvas);
+    /* Subtle dot pattern for the canvas */
+    background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
+    background-size: 20px 20px;
+}
+#markmap {
+    width: 100%;
+    height: 100%;
+}
+.disclaimer {
+    position: absolute;
+    bottom: 16px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 11px;
+    color: var(--text-tertiary);
+    text-align: center;
+    pointer-events: none;
+    z-index: 100;
+}
+/* Responsive Design for Mobile Devices */
+@media (max-width: 768px) {
+    .app-layout {
+        flex-direction: column;
+        height: 100vh;
+        overflow-y: auto; /* Allow scrolling if content overflows */
+    }
+    .sidebar {
+        width: 100%;
+        height: auto;
+        border-right: none;
+        border-bottom: 1px solid var(--border-color);
+        flex-shrink: 0;
+    }
+    .sidebar-header {
+        padding: 16px;
+    }
+    .sidebar-content {
+        padding: 16px;
+        gap: 16px;
+    }
+    textarea {
+        height: 120px; /* Reduce textarea height on mobile */
+        flex-grow: 0;
+    }
+    .canvas-area {
+        min-height: 50vh; /* Ensure canvas has enough space */
+        flex-grow: 1;
+    }
+    .sidebar-footer {
+        padding: 12px 16px;
+    }
+}