From 0392491dbc5db980584b8cf2a660bde6cb3fb4a1 Mon Sep 17 00:00:00 2001
From: reodesureodesu <rebyozuto@pngk.uk>
Date: Wed, 4 Mar 2026 19:59:06 +0900
Subject: [PATCH] Build no-code AI app builder prototype

---
 index.html | 486 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 486 insertions(+)
diff --git a/index.html b/index.html
index 8b13789..2e07646 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,487 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TapApp Studio</title>
+    <style>
+      :root {
+        color-scheme: light;
+        font-family: "Inter", "Noto Sans JP", system-ui, sans-serif;
+        --bg: #f3f5f8;
+        --panel: #ffffff;
+        --text: #18212f;
+        --muted: #5f6b7b;
+        --accent: #3b82f6;
+        --border: #d9e0ea;
+      }
 
+      * { box-sizing: border-box; }
+
+      body {
+        margin: 0;
+        background: var(--bg);
+        color: var(--text);
+      }
+
+      .app {
+        min-height: 100vh;
+        display: grid;
+        grid-template-columns: 320px 1fr 320px;
+        gap: 14px;
+        padding: 14px;
+      }
+
+      .panel {
+        background: var(--panel);
+        border: 1px solid var(--border);
+        border-radius: 14px;
+        padding: 14px;
+        overflow: auto;
+      }
+
+      h1, h2, h3 { margin: 0 0 10px; }
+      h1 { font-size: 1.2rem; }
+      h2 { font-size: 1.05rem; }
+      h3 { font-size: 0.9rem; color: var(--muted); }
+
+      .small { color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
+      .stack { display: grid; gap: 10px; }
+      .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+
+      textarea, input, select, button {
+        font: inherit;
+        width: 100%;
+        border: 1px solid var(--border);
+        border-radius: 10px;
+        padding: 10px;
+      }
+
+      textarea { min-height: 90px; resize: vertical; }
+
+      button {
+        background: white;
+        cursor: pointer;
+      }
+
+      button.primary {
+        background: var(--accent);
+        color: white;
+        border-color: var(--accent);
+      }
+
+      button:disabled { opacity: 0.5; cursor: not-allowed; }
+
+      .builder {
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        gap: 10px;
+      }
+
+      .toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+
+      .toolbar button {
+        width: auto;
+        padding: 8px 12px;
+      }
+
+      .canvas {
+        background: linear-gradient(180deg, #f5f8ff, #fdfdff);
+        border: 1px dashed #b4c2d6;
+        border-radius: 16px;
+        padding: 18px;
+        min-height: 520px;
+        display: grid;
+        gap: 10px;
+        align-content: start;
+      }
+
+      .element {
+        border: 1px solid transparent;
+        border-radius: 10px;
+        padding: 10px;
+        background: white;
+        transition: 0.2s;
+      }
+
+      .element.selected {
+        border-color: var(--accent);
+        box-shadow: 0 0 0 3px #dbeafe;
+      }
+
+      .footer {
+        border-top: 1px solid var(--border);
+        padding-top: 10px;
+      }
+
+      .status {
+        font-size: 0.85rem;
+        color: var(--muted);
+        min-height: 1.2em;
+      }
+
+      .badge {
+        display: inline-block;
+        font-size: 0.75rem;
+        background: #eff6ff;
+        border: 1px solid #bfdbfe;
+        color: #1e40af;
+        border-radius: 999px;
+        padding: 3px 8px;
+      }
+
+      @media (max-width: 1100px) {
+        .app { grid-template-columns: 1fr; }
+        .canvas { min-height: 320px; }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="app">
+      <section class="panel stack">
+        <div>
+          <h1>TapApp Studio</h1>
+          <p class="small">コードを書かずに、タップ中心でアプリUIを作るプロトタイプです。AIに要件を投げて初期画面を生成し、続きから編集できます。</p>
+        </div>
+
+        <div class="stack">
+          <h2>1) AIで下書きを作る</h2>
+          <label class="small">使うAI</label>
+          <select id="provider">
+            <option value="openai">OpenAI API</option>
+            <option value="hf">Hugging Face Inference API</option>
+          </select>
+
+          <label class="small">API Key（ブラウザ保存）</label>
+          <input id="apiKey" type="password" placeholder="sk-... / hf_..." />
+
+          <label class="small">モデル名</label>
+          <input id="model" placeholder="例: gpt-4o-mini / Qwen/Qwen2.5-Coder-32B-Instruct" />
+
+          <label class="small">作りたいアプリ内容</label>
+          <textarea id="prompt" placeholder="例: タスク管理アプリ。上に進捗バー、下にタスク一覧、右下に追加ボタン"></textarea>
+
+          <button id="generateBtn" class="primary">AIでUI構成を生成</button>
+          <div id="aiStatus" class="status"></div>
+          <p class="small">AIには <span class="badge">JSON形式</span> で画面要素の提案を依頼します。失敗時はテンプレートで代替します。</p>
+        </div>
+      </section>
+
+      <section class="panel builder">
+        <div>
+          <h2>2) タップで組み立てるキャンバス</h2>
+          <div class="toolbar">
+            <button data-add="heading">見出し</button>
+            <button data-add="text">テキスト</button>
+            <button data-add="button">ボタン</button>
+            <button data-add="input">入力欄</button>
+            <button data-add="card">カード</button>
+          </div>
+        </div>
+
+        <div id="canvas" class="canvas"></div>
+
+        <div class="footer stack">
+          <div class="grid-2">
+            <button id="saveBtn">作業を保存</button>
+            <button id="loadBtn">続きから再開</button>
+          </div>
+          <div class="grid-2">
+            <button id="exportBtn">JSONエクスポート</button>
+            <button id="deployGuideBtn">Vercelデプロイ手順</button>
+          </div>
+          <div id="saveStatus" class="status"></div>
+        </div>
+      </section>
+
+      <section class="panel stack">
+        <div>
+          <h2>3) 選択中の要素を編集</h2>
+          <p class="small">キャンバス上の要素をタップして、テキストや色を変更します。</p>
+        </div>
+
+        <label class="small">内容テキスト</label>
+        <input id="propText" placeholder="テキスト" />
+
+        <label class="small">背景色</label>
+        <input id="propBg" type="color" value="#ffffff" />
+
+        <label class="small">文字色</label>
+        <input id="propColor" type="color" value="#18212f" />
+
+        <label class="small">角丸(px)</label>
+        <input id="propRadius" type="range" min="0" max="40" value="10" />
+
+        <div class="grid-2">
+          <button id="applyBtn" class="primary">変更を適用</button>
+          <button id="deleteBtn">要素を削除</button>
+        </div>
+
+        <div id="editStatus" class="status"></div>
+      </section>
+    </main>
+
+    <script>
+      const defaultState = {
+        elements: [
+          { id: crypto.randomUUID(), type: "heading", text: "ようこそ", style: { bg: "#ffffff", color: "#18212f", radius: 10 } },
+          { id: crypto.randomUUID(), type: "text", text: "左のAI入力か、上のボタンで要素を追加してください。", style: { bg: "#ffffff", color: "#334155", radius: 10 } }
+        ]
+      };
+
+      let state = JSON.parse(localStorage.getItem("tapapp-state") || "null") || defaultState;
+      let selectedId = state.elements[0]?.id ?? null;
+
+      const ui = {
+        canvas: document.getElementById("canvas"),
+        addButtons: [...document.querySelectorAll("[data-add]")],
+        propText: document.getElementById("propText"),
+        propBg: document.getElementById("propBg"),
+        propColor: document.getElementById("propColor"),
+        propRadius: document.getElementById("propRadius"),
+        applyBtn: document.getElementById("applyBtn"),
+        deleteBtn: document.getElementById("deleteBtn"),
+        editStatus: document.getElementById("editStatus"),
+        saveBtn: document.getElementById("saveBtn"),
+        loadBtn: document.getElementById("loadBtn"),
+        exportBtn: document.getElementById("exportBtn"),
+        deployGuideBtn: document.getElementById("deployGuideBtn"),
+        saveStatus: document.getElementById("saveStatus"),
+        provider: document.getElementById("provider"),
+        apiKey: document.getElementById("apiKey"),
+        model: document.getElementById("model"),
+        prompt: document.getElementById("prompt"),
+        generateBtn: document.getElementById("generateBtn"),
+        aiStatus: document.getElementById("aiStatus")
+      };
+
+      function elementTag(type) {
+        if (type === "heading") return "h3";
+        if (type === "button") return "button";
+        if (type === "input") return "input";
+        return "div";
+      }
+
+      function render() {
+        ui.canvas.innerHTML = "";
+        state.elements.forEach((item) => {
+          const tag = elementTag(item.type);
+          const el = document.createElement(tag);
+          el.className = `element ${item.id === selectedId ? "selected" : ""}`;
+          el.dataset.id = item.id;
+          el.style.background = item.style.bg;
+          el.style.color = item.style.color;
+          el.style.borderRadius = `${item.style.radius}px`;
+          if (item.type === "input") {
+            el.value = item.text;
+            el.readOnly = true;
+          } else {
+            el.textContent = item.text;
+          }
+          el.onclick = () => {
+            selectedId = item.id;
+            syncEditor();
+            render();
+          };
+          ui.canvas.appendChild(el);
+        });
+        syncEditor();
+      }
+
+      function syncEditor() {
+        const selected = state.elements.find((e) => e.id === selectedId);
+        const disabled = !selected;
+        [ui.propText, ui.propBg, ui.propColor, ui.propRadius, ui.applyBtn, ui.deleteBtn].forEach((e) => e.disabled = disabled);
+        if (!selected) return;
+        ui.propText.value = selected.text;
+        ui.propBg.value = selected.style.bg;
+        ui.propColor.value = selected.style.color;
+        ui.propRadius.value = selected.style.radius;
+      }
+
+      function addElement(type) {
+        const map = {
+          heading: "新しい見出し",
+          text: "新しいテキスト",
+          button: "アクション",
+          input: "入力してください",
+          card: "カードコンテンツ"
+        };
+        const next = {
+          id: crypto.randomUUID(),
+          type,
+          text: map[type],
+          style: { bg: "#ffffff", color: "#18212f", radius: 10 }
+        };
+        state.elements.push(next);
+        selectedId = next.id;
+        ui.editStatus.textContent = "要素を追加しました。";
+        render();
+      }
+
+      function saveState(msg = "保存しました。") {
+        localStorage.setItem("tapapp-state", JSON.stringify(state));
+        localStorage.setItem("tapapp-api-key", ui.apiKey.value.trim());
+        localStorage.setItem("tapapp-provider", ui.provider.value);
+        localStorage.setItem("tapapp-model", ui.model.value.trim());
+        ui.saveStatus.textContent = msg;
+      }
+
+      function loadState() {
+        const loaded = JSON.parse(localStorage.getItem("tapapp-state") || "null");
+        if (!loaded?.elements?.length) {
+          ui.saveStatus.textContent = "保存データがありません。";
+          return;
+        }
+        state = loaded;
+        selectedId = state.elements[0].id;
+        render();
+        ui.saveStatus.textContent = "保存データを読み込みました。";
+      }
+
+      function extractJson(text) {
+        const match = text.match(/\{[\s\S]*\}/);
+        if (!match) return null;
+        try { return JSON.parse(match[0]); } catch { return null; }
+      }
+
+      async function callOpenAI({ key, model, prompt }) {
+        const response = await fetch("https://api.openai.com/v1/chat/completions", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${key}`
+          },
+          body: JSON.stringify({
+            model: model || "gpt-4o-mini",
+            messages: [
+              { role: "system", content: "あなたはノーコードUI設計アシスタント。{\"elements\":[{\"type\":\"heading|text|button|input|card\",\"text\":\"...\",\"style\":{\"bg\":\"#ffffff\",\"color\":\"#111827\",\"radius\":10}}]} のJSONのみ返すこと。" },
+              { role: "user", content: prompt }
+            ],
+            temperature: 0.7
+          })
+        });
+        if (!response.ok) throw new Error(`OpenAI API error ${response.status}`);
+        const data = await response.json();
+        return data.choices?.[0]?.message?.content || "";
+      }
+
+      async function callHF({ key, model, prompt }) {
+        const response = await fetch(`https://api-inference.huggingface.co/models/${model || "Qwen/Qwen2.5-Coder-32B-Instruct"}`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${key}`
+          },
+          body: JSON.stringify({
+            inputs: `以下の要件からUI要素JSONを生成して。形式: {"elements":[{"type":"heading|text|button|input|card","text":"...","style":{"bg":"#ffffff","color":"#111827","radius":10}}]} 要件:${prompt}`,
+            parameters: { max_new_tokens: 500, temperature: 0.4 }
+          })
+        });
+        if (!response.ok) throw new Error(`HF API error ${response.status}`);
+        const data = await response.json();
+        if (Array.isArray(data)) return data[0]?.generated_text || "";
+        return data.generated_text || JSON.stringify(data);
+      }
+
+      function applyGenerated(parsed) {
+        if (!parsed?.elements?.length) throw new Error("Invalid schema");
+        state.elements = parsed.elements.slice(0, 20).map((e) => ({
+          id: crypto.randomUUID(),
+          type: ["heading", "text", "button", "input", "card"].includes(e.type) ? e.type : "text",
+          text: String(e.text || "新しい要素"),
+          style: {
+            bg: e.style?.bg || "#ffffff",
+            color: e.style?.color || "#18212f",
+            radius: Number.isFinite(Number(e.style?.radius)) ? Number(e.style.radius) : 10
+          }
+        }));
+        selectedId = state.elements[0]?.id || null;
+        render();
+      }
+
+      ui.addButtons.forEach((btn) => btn.onclick = () => addElement(btn.dataset.add));
+
+      ui.applyBtn.onclick = () => {
+        const selected = state.elements.find((e) => e.id === selectedId);
+        if (!selected) return;
+        selected.text = ui.propText.value;
+        selected.style.bg = ui.propBg.value;
+        selected.style.color = ui.propColor.value;
+        selected.style.radius = Number(ui.propRadius.value);
+        ui.editStatus.textContent = "変更を反映しました。";
+        render();
+      };
+
+      ui.deleteBtn.onclick = () => {
+        if (!selectedId) return;
+        state.elements = state.elements.filter((e) => e.id !== selectedId);
+        selectedId = state.elements[0]?.id || null;
+        ui.editStatus.textContent = "要素を削除しました。";
+        render();
+      };
+
+      ui.saveBtn.onclick = () => saveState();
+      ui.loadBtn.onclick = () => loadState();
+      ui.exportBtn.onclick = () => {
+        const blob = new Blob([JSON.stringify(state, null, 2)], { type: "application/json" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = "tapapp-layout.json";
+        a.click();
+        URL.revokeObjectURL(url);
+        ui.saveStatus.textContent = "JSONをエクスポートしました。";
+      };
+
+      ui.deployGuideBtn.onclick = () => {
+        alert("Vercelデプロイ手順:\n1. このフォルダをGitHubにpush\n2. vercel.comでNew Project\n3. GitHubリポジトリを選択\n4. Framework PresetはOther\n5. Deployで公開\n\nAPIキーはクライアント直書きではなく本番ではVercel Functions経由にしてください。");
+      };
+
+      ui.generateBtn.onclick = async () => {
+        const key = ui.apiKey.value.trim();
+        const prompt = ui.prompt.value.trim();
+        if (!key || !prompt) {
+          ui.aiStatus.textContent = "APIキーと要件を入力してください。";
+          return;
+        }
+        ui.generateBtn.disabled = true;
+        ui.aiStatus.textContent = "AIで生成中...";
+        try {
+          const provider = ui.provider.value;
+          const model = ui.model.value.trim();
+          const raw = provider === "openai"
+            ? await callOpenAI({ key, model, prompt })
+            : await callHF({ key, model, prompt });
+          const parsed = extractJson(raw);
+          if (!parsed) throw new Error("JSON parse failed");
+          applyGenerated(parsed);
+          ui.aiStatus.textContent = "AI構成を適用しました。必要に応じて右側から微調整できます。";
+        } catch (error) {
+          console.error(error);
+          applyGenerated({
+            elements: [
+              { type: "heading", text: "AI生成に失敗したためテンプレートを表示", style: { bg: "#fff7ed", color: "#9a3412", radius: 12 } },
+              { type: "text", text: prompt, style: { bg: "#ffffff", color: "#334155", radius: 10 } },
+              { type: "button", text: "開始", style: { bg: "#3b82f6", color: "#ffffff", radius: 10 } }
+            ]
+          });
+          ui.aiStatus.textContent = "AI応答を解析できなかったためテンプレートを作成しました。";
+        } finally {
+          ui.generateBtn.disabled = false;
+        }
+      };
+
+      (function bootstrap() {
+        ui.apiKey.value = localStorage.getItem("tapapp-api-key") || "";
+        ui.provider.value = localStorage.getItem("tapapp-provider") || "openai";
+        ui.model.value = localStorage.getItem("tapapp-model") || "";
+        render();
+      })();
+    </script>
+  </body>
+</html>
