Spaces:

jmp1987
/

my-static-website

Running

App Files Files Community

jmp1987 commited on 9 days ago

Commit

b6a8167

verified ·

1 Parent(s): 65a98c5

Update index.html

Browse files

Files changed (1) hide show

index.html +142 -171

index.html CHANGED Viewed

@@ -22,18 +22,17 @@
   .btn-generate{background:linear-gradient(90deg,#f7971e,#ffd200);color:#000}
   .btn-generate:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,210,0,.3)}
   .btn-generate:disabled{opacity:.5;cursor:not-allowed;transform:none}
-  .btn-download{background:linear-gradient(90deg,#11998e,#38ef7d);color:#000;margin-top:12px}
-  .btn-download:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(56,239,125,.3)}
   .progress-wrap{margin:20px 0;display:none}
-  .progress-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
-  .progress-fill{height:100%;background:linear-gradient(90deg,#f7971e,#ffd200);border-radius:3px;width:0%;transition:width .4s}
-  .status{text-align:center;margin-top:10px;font-size:.9rem;color:#ffd200}
-  .preview-content{background:rgba(255,255,255,.05);border-radius:12px;padding:20px;max-height:400px;overflow-y:auto;font-size:.85rem;line-height:1.7;color:#ddd;white-space:pre-wrap;font-family:Georgia,serif;border:1px solid rgba(255,255,255,.08)}
   .chapter-list{list-style:none;padding:0}
   .chapter-list li{padding:8px 12px;border-left:3px solid #ffd200;margin-bottom:8px;background:rgba(255,210,0,.05);border-radius:0 8px 8px 0;font-size:.9rem;color:#eee}
   .tag{display:inline-block;background:rgba(255,210,0,.15);border:1px solid rgba(255,210,0,.3);color:#ffd200;padding:3px 10px;border-radius:20px;font-size:.75rem;margin:3px;cursor:pointer}
   .tag:hover{background:rgba(255,210,0,.3)}
-  .api-note{text-align:center;font-size:.78rem;color:#888;margin-top:8px}
   .sections-info{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
   .stat-box{background:rgba(255,255,255,.05);border-radius:10px;padding:12px;text-align:center}
   .stat-box .val{font-size:1.4rem;font-weight:700;color:#ffd200}
@@ -41,35 +40,35 @@
   .tabs{display:flex;gap:8px;margin-bottom:16px}
   .tab{padding:8px 18px;border-radius:8px;cursor:pointer;font-size:.85rem;border:1px solid rgba(255,255,255,.15);color:#aaa;background:transparent}
   .tab.active{background:rgba(255,210,0,.15);border-color:#ffd200;color:#ffd200}
-  .error{color:#ff6b6b;font-size:.85rem;margin-top:8px;padding:10px;background:rgba(255,107,107,.1);border-radius:8px;border:1px solid rgba(255,107,107,.3);display:none}
-  .model-info{font-size:.75rem;color:#888;text-align:center;margin-top:6px}
 </style>
 </head>
 <body>
 <div class="container">
   <h1>📚 KDP eBook Generator</h1>
-  <p class="subtitle">Erstelle in Sekunden ein Amazon KDP-fertiges eBook — mit einem Klick</p>
-  <div class="card" id="inputCard">
     <div style="margin-bottom:20px">
-      <label>📖 Thema / Titel des eBooks</label>
-      <input type="text" id="topic" placeholder="z.B. Stoizismus für Anfänger, Ketogene Ernährung, Python lernen..."/>
       <div style="margin-top:8px">
         <span class="tag" onclick="setTopic('Stoizismus für modernes Leben')">Stoizismus</span>
-        <span class="tag" onclick="setTopic('Abnehmen ohne Diät – 10 wissenschaftliche Strategien')">Abnehmen</span>
         <span class="tag" onclick="setTopic('Passives Einkommen mit KI')">Passives Einkommen</span>
         <span class="tag" onclick="setTopic('Meditation für Anfänger in 21 Tagen')">Meditation</span>
         <span class="tag" onclick="setTopic('Kryptowährungen einfach erklärt')">Krypto</span>
-        <span class="tag" onclick="setTopic('Produktivität steigern – Deep Work Methoden')">Produktivität</span>
       </div>
     </div>
     <div style="margin-bottom:20px">
       <label>🎯 Zielgruppe & Kontext</label>
-      <textarea id="context" placeholder="z.B. Für gestresste Berufstätige zwischen 30–50, die mehr Gelassenheit im Alltag suchen..."></textarea>
     </div>
     <div class="row" style="margin-bottom:20px">
       <div>
-        <label>📝 Anzahl Kapitel</label>
         <select id="chapters">
           <option value="5">5 Kapitel</option>
           <option value="7" selected>7 Kapitel</option>
@@ -92,9 +91,9 @@
         <select id="style">
           <option value="informative and clear">Informativ & Klar</option>
           <option value="motivating and inspiring" selected>Motivierend</option>
-          <option value="scientific and evidence-based">Wissenschaftlich</option>
           <option value="casual and humorous">Locker & Humorvoll</option>
-          <option value="storytelling-based">Storytelling</option>
         </select>
       </div>
       <div>
@@ -102,219 +101,191 @@
         <input type="password" id="apiToken" placeholder="hf_xxxxxxxxxxxxxxxx"/>
       </div>
     </div>
-    <p class="api-note">🔑 Kostenlosen Token auf <a href="https://huggingface.co/settings/tokens" target="_blank" style="color:#ffd200">huggingface.co/settings/tokens</a> erstellen (Write oder Read)</p>
-    <p class="model-info">Modell: mistralai/Mistral-7B-Instruct-v0.3 via HF Inference API</p>
     <div id="errorMsg" class="error"></div>
   </div>
-  <button class="btn btn-generate" id="generateBtn" onclick="generateEbook()">⚡ eBook jetzt generieren</button>
-  <div class="progress-wrap" id="progressWrap">
-    <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
-    <div class="status" id="statusText">Initialisiere...</div>
   </div>
   <div id="resultCard" style="display:none" class="card">
-    <h2 style="margin-bottom:16px;color:#ffd200;font-size:1.3rem">✅ eBook erstellt!</h2>
     <div class="sections-info">
-      <div class="stat-box"><div class="val" id="statWords">0</div><div class="lbl">Wörter</div></div>
-      <div class="stat-box"><div class="val" id="statChapters">0</div><div class="lbl">Kapitel</div></div>
-      <div class="stat-box"><div class="val" id="statPages">~0</div><div class="lbl">KDP-Seiten</div></div>
     </div>
     <div style="margin-top:20px">
       <div class="tabs">
-        <div class="tab active" id="tabOutline" onclick="showTab('outline')">📋 Inhaltsverzeichnis</div>
-        <div class="tab" id="tabPreview" onclick="showTab('preview')">👁️ Vorschau</div>
       </div>
-      <div id="outlineTab"><ul class="chapter-list" id="chapterList"></ul></div>
-      <div id="previewTab" style="display:none"><div class="preview-content" id="previewContent"></div></div>
     </div>
-    <button class="btn btn-download" onclick="downloadHTML()">📥 HTML eBook herunterladen (KDP-fertig)</button>
-    <button class="btn btn-download" onclick="downloadTXT()" style="background:linear-gradient(90deg,#667eea,#764ba2);margin-top:8px">📄 Text (.txt) herunterladen</button>
   </div>
 </div>
-<script>
 let ebookData = null;
-function setTopic(t){ document.getElementById('topic').value = t; }
-function showTab(tab){
-  document.getElementById('outlineTab').style.display = tab==='outline'?'block':'none';
-  document.getElementById('previewTab').style.display = tab==='preview'?'block':'none';
-  document.getElementById('tabOutline').className = 'tab' + (tab==='outline'?' active':'');
-  document.getElementById('tabPreview').className = 'tab' + (tab==='preview'?' active':'');
-}
-function setProgress(pct, msg){
-  document.getElementById('progressFill').style.width = pct+'%';
-  document.getElementById('statusText').textContent = msg;
-}
-function showError(msg){
-  const el = document.getElementById('errorMsg');
-  el.textContent = '❌ ' + msg;
-  el.style.display = 'block';
-}
-// HuggingFace Inference API - correct endpoint
-async function callHF(token, systemPrompt, userPrompt) {
-  const model = 'mistralai/Mistral-7B-Instruct-v0.3';
-  const url = 'https://api-inference.huggingface.co/models/' + model + '/v1/chat/completions';
-  const response = await fetch(url, {
-    method: 'POST',
-    headers: {
-      'Authorization': 'Bearer ' + token,
-      'Content-Type': 'application/json'
-    },
-    body: JSON.stringify({
-      model: model,
-      messages: [
-        { role: 'system', content: systemPrompt },
-        { role: 'user', content: userPrompt }
-      ],
-      max_tokens: 1500,
-      temperature: 0.7,
-      stream: false
-    })
   });
-  if (!response.ok) {
-    const errText = await response.text();
-    let errMsg = 'HTTP ' + response.status;
-    try {
-      const errJson = JSON.parse(errText);
-      errMsg = errJson.error || errMsg;
-    } catch(e) {}
-    throw new Error(errMsg);
-  }
-  const data = await response.json();
-  return data.choices[0].message.content.trim();
 }
-async function generateEbook(){
-  const topic = document.getElementById('topic').value.trim();
   const context = document.getElementById('context').value.trim();
-  const numChapters = parseInt(document.getElementById('chapters').value);
-  const language = document.getElementById('language').value;
-  const style = document.getElementById('style').value;
-  const token = document.getElementById('apiToken').value.trim();
-  const errEl = document.getElementById('errorMsg');
   errEl.style.display = 'none';
-  if(!topic){ showError('Bitte gib ein Thema ein.'); return; }
-  if(!token){ showError('Bitte gib deinen HuggingFace API Token ein.'); return; }
-  document.getElementById('generateBtn').disabled = true;
-  document.getElementById('progressWrap').style.display = 'block';
   document.getElementById('resultCard').style.display = 'none';
   try {
-    // Step 1: Generate outline
-    setProgress(5, '📋 Erstelle Kapitelstruktur...');
-    const systemPrompt = 'You are a professional book author. Always respond in ' + language + '. Be concise and structured.';
-    const outlineResult = await callHF(token, systemPrompt,
-      'Create a numbered list of exactly ' + numChapters + ' chapter titles for an eBook about: "' + topic + '". Target audience: ' + (context || 'general readers') + '. Writing style: ' + style + '. Output ONLY the numbered list, nothing else. Example format:\n1. Chapter Title\n2. Chapter Title'
-    );
-    setProgress(15, '✅ Kapitelstruktur erstellt');
-    // Parse chapter titles
-    const lines = outlineResult.split('\n').filter(l => /^\d+[\.\)\:]/.test(l.trim()));
-    let chapterTitles = lines.map(l => l.replace(/^\d+[\.\)\:]\s*/, '').trim()).filter(t => t.length > 2);
-    if(chapterTitles.length < 2){
-      // Fallback: try splitting by newline and take non-empty lines
-      const fallback = outlineResult.split('\n').map(l=>l.trim()).filter(l=>l.length>5 && !l.startsWith('#'));
-      chapterTitles = fallback.slice(0, numChapters);
     }
-    if(chapterTitles.length < 2) throw new Error('Kapitelstruktur konnte nicht generiert werden. Versuche es erneut.');
-    chapterTitles = chapterTitles.slice(0, numChapters);
-    // Step 2: Generate chapter content
     const chapters = [];
-    for(let i = 0; i < chapterTitles.length; i++){
-      const pct = 15 + Math.round((i + 1) / chapterTitles.length * 78);
-      setProgress(pct, '✍️ Schreibe Kapitel ' + (i+1) + '/' + chapterTitles.length + ': ' + chapterTitles[i].substring(0,35) + '...');
-      const content = await callHF(token, systemPrompt,
-        'Write chapter ' + (i+1) + ' of an eBook titled "' + topic + '".' +
-        '\nChapter title: "' + chapterTitles[i] + '"' +
-        '\nTarget audience: ' + (context || 'general readers') +
-        '\nStyle: ' + style +
-        '\nWrite at least 350 words of actual content. Use paragraphs. No placeholder text. Start writing directly.'
       );
-      chapters.push({ title: chapterTitles[i], content: content });
     }
-    setProgress(98, '📚 Finalisiere eBook...');
-    const intro = 'Dieses eBook wurde für ' + (context || 'interessierte Leserinnen und Leser') +
-                  ' verfasst und behandelt das Thema "' + topic + '" auf ' + style + 'e Weise.';
-    ebookData = { topic, context, language, style, intro, chapters };
-    const wordCount = chapters.reduce((s,c) => s + c.content.split(/\s+/).length, 0);
-    document.getElementById('statWords').textContent = wordCount.toLocaleString('de-DE');
-    document.getElementById('statChapters').textContent = chapters.length;
-    document.getElementById('statPages').textContent = '~' + Math.round(wordCount / 250);
-    document.getElementById('chapterList').innerHTML =
-      chapters.map((c,i) => '<li>Kapitel ' + (i+1) + ': ' + c.title + '</li>').join('');
-    document.getElementById('previewContent').textContent =
-      topic + '\n' + '='.repeat(50) + '\n\n' + intro + '\n\n' +
-      chapters.map((c,i) => 'Kapitel ' + (i+1) + ': ' + c.title + '\n' + '-'.repeat(40) + '\n' + c.content).join('\n\n');
-    setProgress(100, '🎉 eBook fertig!');
     document.getElementById('resultCard').style.display = 'block';
   } catch(err) {
-    showError(err.message);
-    document.getElementById('progressWrap').style.display = 'none';
   } finally {
-    document.getElementById('generateBtn').disabled = false;
   }
-}
-function buildHTMLEbook(){
-  const { topic, language, style, intro, chapters } = ebookData;
-  const langCode = {'German':'de','English':'en','Spanish':'es','French':'fr'}[language] || 'de';
-  const toc = chapters.map((c,i) => '<li><a href="#ch'+(i+1)+'">Kapitel '+(i+1)+': '+c.title+'</a></li>').join('');
-  const chHTML = chapters.map((c,i) =>
-    '<div class="chapter" id="ch'+(i+1)+'">' +
-    '<div class="ch-num">Kapitel '+(i+1)+'</div>' +
-    '<h2>'+c.title+'</h2>' +
-    c.content.split('\n\n').filter(p=>p.trim()).map(p=>'<p>'+p.replace(/\n/g,' ')+'</p>').join('') +
-    '</div>'
   ).join('');
-  return '<!DOCTYPE html>\n<html lang="'+langCode+'">\n<head>\n<meta charset="UTF-8"/>\n<title>'+topic+'</title>\n<style>\n@page{size:6in 9in;margin:1in}\nbody{font-family:Georgia,serif;font-size:11pt;line-height:1.8;color:#1a1a1a;max-width:580px;margin:0 auto;padding:40px 20px}\n.cover{text-align:center;padding:100px 40px;border-bottom:3px double #333;margin-bottom:60px;page-break-after:always}\n.cover h1{font-size:26pt;line-height:1.3;margin-bottom:20px}\n.toc{page-break-after:always}\n.toc h2{font-size:15pt;border-bottom:2px solid #333;padding-bottom:8px;margin-bottom:16px}\n.toc ul{list-style:none;padding:0}\n.toc li{padding:7px 0;border-bottom:1px dotted #ccc}\n.toc a{text-decoration:none;color:#222}\n.intro{font-style:italic;color:#555;border-left:4px solid #aaa;padding-left:16px;margin:30px 0 50px;page-break-after:always}\n.chapter{page-break-before:always;margin-bottom:40px}\n.ch-num{font-size:9pt;text-transform:uppercase;letter-spacing:3px;color:#999;margin-bottom:6px}\n.chapter h2{font-size:17pt;border-bottom:2px solid #222;padding-bottom:10px;margin-bottom:20px}\np{margin-bottom:14px;text-align:justify;text-indent:1.5em}\np:first-of-type{text-indent:0}\n</style>\n</head>\n<body>\n<div class="cover"><h1>'+topic+'</h1><p style="color:#666;margin-top:20px">'+language+' &bull; '+style+'</p><p style="color:#999;margin-top:10px">&copy; '+new Date().getFullYear()+'</p></div>\n<div class="toc"><h2>Inhaltsverzeichnis</h2><ul>'+toc+'</ul></div>\n<div class="intro"><p>'+intro+'</p></div>\n'+chHTML+'\n</body>\n</html>';
 }
-function downloadHTML(){
   if(!ebookData) return;
-  const blob = new Blob([buildHTMLEbook()], {type:'text/html;charset=utf-8'});
   const a = document.createElement('a');
-  a.href = URL.createObjectURL(blob);
   a.download = ebookData.topic.replace(/[^\w\säöüÄÖÜß]/g,'_').substring(0,50)+'_KDP.html';
   a.click();
-}
-function downloadTXT(){
   if(!ebookData) return;
   const txt = ebookData.topic+'\n'+'='.repeat(60)+'\n\n'+ebookData.intro+'\n\n'+
     ebookData.chapters.map((c,i)=>'KAPITEL '+(i+1)+': '+c.title.toUpperCase()+'\n'+'-'.repeat(60)+'\n'+c.content).join('\n\n');
-  const blob = new Blob([txt], {type:'text/plain;charset=utf-8'});
   const a = document.createElement('a');
-  a.href = URL.createObjectURL(blob);
   a.download = ebookData.topic.replace(/[^\w\säöüÄÖÜß]/g,'_').substring(0,50)+'_KDP.txt';
   a.click();
-}
 </script>
 </body>
 </html>

   .btn-generate{background:linear-gradient(90deg,#f7971e,#ffd200);color:#000}
   .btn-generate:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,210,0,.3)}
   .btn-generate:disabled{opacity:.5;cursor:not-allowed;transform:none}
+  .btn-dl{color:#000;margin-top:10px}
+  .btn-dl:hover{transform:translateY(-2px)}
   .progress-wrap{margin:20px 0;display:none}
+  .progress-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
+  .progress-fill{height:100%;background:linear-gradient(90deg,#f7971e,#ffd200);border-radius:4px;width:0%;transition:width .5s}
+  .status{text-align:center;margin-top:10px;font-size:.9rem;color:#ffd200;min-height:20px}
+  .preview-content{background:rgba(255,255,255,.05);border-radius:12px;padding:20px;max-height:380px;overflow-y:auto;font-size:.85rem;line-height:1.7;color:#ddd;white-space:pre-wrap;font-family:Georgia,serif;border:1px solid rgba(255,255,255,.08)}
   .chapter-list{list-style:none;padding:0}
   .chapter-list li{padding:8px 12px;border-left:3px solid #ffd200;margin-bottom:8px;background:rgba(255,210,0,.05);border-radius:0 8px 8px 0;font-size:.9rem;color:#eee}
   .tag{display:inline-block;background:rgba(255,210,0,.15);border:1px solid rgba(255,210,0,.3);color:#ffd200;padding:3px 10px;border-radius:20px;font-size:.75rem;margin:3px;cursor:pointer}
   .tag:hover{background:rgba(255,210,0,.3)}
   .sections-info{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
   .stat-box{background:rgba(255,255,255,.05);border-radius:10px;padding:12px;text-align:center}
   .stat-box .val{font-size:1.4rem;font-weight:700;color:#ffd200}
   .tabs{display:flex;gap:8px;margin-bottom:16px}
   .tab{padding:8px 18px;border-radius:8px;cursor:pointer;font-size:.85rem;border:1px solid rgba(255,255,255,.15);color:#aaa;background:transparent}
   .tab.active{background:rgba(255,210,0,.15);border-color:#ffd200;color:#ffd200}
+  .error{color:#ff6b6b;font-size:.85rem;margin-top:8px;padding:12px 16px;background:rgba(255,107,107,.1);border-radius:8px;border:1px solid rgba(255,107,107,.3);display:none;line-height:1.5}
+  .note{text-align:center;font-size:.78rem;color:#888;margin-top:6px}
 </style>
 </head>
 <body>
 <div class="container">
   <h1>📚 KDP eBook Generator</h1>
+  <p class="subtitle">Amazon KDP-fertiges eBook mit einem Klick erstellen</p>
+  <div class="card">
     <div style="margin-bottom:20px">
+      <label>📖 Thema / Titel</label>
+      <input type="text" id="topic" placeholder="z.B. Stoizismus für Anfänger, Ketogene Ernährung..."/>
       <div style="margin-top:8px">
         <span class="tag" onclick="setTopic('Stoizismus für modernes Leben')">Stoizismus</span>
+        <span class="tag" onclick="setTopic('Abnehmen ohne Diät – 10 Strategien')">Abnehmen</span>
         <span class="tag" onclick="setTopic('Passives Einkommen mit KI')">Passives Einkommen</span>
         <span class="tag" onclick="setTopic('Meditation für Anfänger in 21 Tagen')">Meditation</span>
         <span class="tag" onclick="setTopic('Kryptowährungen einfach erklärt')">Krypto</span>
+        <span class="tag" onclick="setTopic('Produktivität steigern – Deep Work')">Produktivität</span>
       </div>
     </div>
     <div style="margin-bottom:20px">
       <label>🎯 Zielgruppe & Kontext</label>
+      <textarea id="context" placeholder="z.B. Gestresste Berufstätige 30–50, praktischer Ratgeber-Stil..."></textarea>
     </div>
     <div class="row" style="margin-bottom:20px">
       <div>
+        <label>📝 Kapitel</label>
         <select id="chapters">
           <option value="5">5 Kapitel</option>
           <option value="7" selected>7 Kapitel</option>
         <select id="style">
           <option value="informative and clear">Informativ & Klar</option>
           <option value="motivating and inspiring" selected>Motivierend</option>
+          <option value="scientific">Wissenschaftlich</option>
           <option value="casual and humorous">Locker & Humorvoll</option>
+          <option value="storytelling">Storytelling</option>
         </select>
       </div>
       <div>
         <input type="password" id="apiToken" placeholder="hf_xxxxxxxxxxxxxxxx"/>
       </div>
     </div>
+    <p class="note">🔑 Token erstellen: <a href="https://huggingface.co/settings/tokens" target="_blank" style="color:#ffd200">huggingface.co/settings/tokens</a> (Write-Berechtigung)</p>
     <div id="errorMsg" class="error"></div>
   </div>
+  <button class="btn btn-generate" id="genBtn" onclick="generate()">⚡ eBook jetzt generieren</button>
+  <div class="progress-wrap" id="pw">
+    <div class="progress-bar"><div class="progress-fill" id="pf"></div></div>
+    <div class="status" id="st"></div>
   </div>
   <div id="resultCard" style="display:none" class="card">
+    <h2 style="color:#ffd200;font-size:1.3rem;margin-bottom:16px">✅ eBook fertig!</h2>
     <div class="sections-info">
+      <div class="stat-box"><div class="val" id="sW">0</div><div class="lbl">Wörter</div></div>
+      <div class="stat-box"><div class="val" id="sC">0</div><div class="lbl">Kapitel</div></div>
+      <div class="stat-box"><div class="val" id="sP">~0</div><div class="lbl">KDP-Seiten</div></div>
     </div>
     <div style="margin-top:20px">
       <div class="tabs">
+        <div class="tab active" id="t1" onclick="showTab('o')">📋 Inhalt</div>
+        <div class="tab" id="t2" onclick="showTab('p')">👁️ Vorschau</div>
       </div>
+      <div id="tabO"><ul class="chapter-list" id="cList"></ul></div>
+      <div id="tabP" style="display:none"><div class="preview-content" id="prev"></div></div>
     </div>
+    <button class="btn btn-dl" style="background:linear-gradient(90deg,#11998e,#38ef7d);margin-top:16px" onclick="dlHTML()">📥 HTML eBook (KDP-fertig)</button>
+    <button class="btn btn-dl" style="background:linear-gradient(90deg,#667eea,#764ba2)" onclick="dlTXT()">📄 Text (.txt)</button>
   </div>
 </div>
+<script type="module">
+import { InferenceClient } from 'https://esm.sh/@huggingface/inference@3';
 let ebookData = null;
+window.setTopic = t => document.getElementById('topic').value = t;
+window.showTab = tab => {
+  document.getElementById('tabO').style.display = tab==='o'?'block':'none';
+  document.getElementById('tabP').style.display = tab==='p'?'block':'none';
+  document.getElementById('t1').className = 'tab'+(tab==='o'?' active':'');
+  document.getElementById('t2').className = 'tab'+(tab==='p'?' active':'');
+};
+const prog = (p,m) => {
+  document.getElementById('pf').style.width = p+'%';
+  document.getElementById('st').textContent = m;
+};
+const showErr = m => {
+  const e = document.getElementById('errorMsg');
+  e.innerHTML = '❌ ' + m;
+  e.style.display = 'block';
+};
+async function ask(client, system, user) {
+  const out = await client.chatCompletion({
+    model: 'mistralai/Mistral-7B-Instruct-v0.3',
+    messages: [
+      { role: 'system', content: system },
+      { role: 'user', content: user }
+    ],
+    max_tokens: 1500,
+    temperature: 0.7
   });
+  return out.choices[0].message.content.trim();
 }
+window.generate = async () => {
+  const topic   = document.getElementById('topic').value.trim();
   const context = document.getElementById('context').value.trim();
+  const numCh   = parseInt(document.getElementById('chapters').value);
+  const lang    = document.getElementById('language').value;
+  const style   = document.getElementById('style').value;
+  const token   = document.getElementById('apiToken').value.trim();
+  const errEl   = document.getElementById('errorMsg');
   errEl.style.display = 'none';
+  if(!topic){ showErr('Bitte gib ein Thema ein.'); return; }
+  if(!token){ showErr('Bitte gib deinen HuggingFace API Token ein.'); return; }
+  document.getElementById('genBtn').disabled = true;
+  document.getElementById('pw').style.display = 'block';
   document.getElementById('resultCard').style.display = 'none';
   try {
+    const client = new InferenceClient(token);
+    const sys = 'You are a professional book author. Always write in ' + lang + '. Be detailed and engaging.';
+    prog(5, '📋 Erstelle Kapitelstruktur...');
+    const outlineRaw = await ask(client, sys,
+      'Create exactly ' + numCh + ' chapter titles for an eBook: "' + topic + '"\n' +
+      'Audience: ' + (context||'general readers') + '\nStyle: ' + style + '\n' +
+      'Output ONLY a numbered list:\n1. Title\n2. Title\n...'
+    );
+    const lines = outlineRaw.split('\n').filter(l => /^\d+[.):]/.test(l.trim()));
+    let titles = lines.map(l => l.replace(/^\d+[.):] */, '').trim()).filter(t=>t.length>2).slice(0, numCh);
+    if(titles.length < 2) {
+      const fb = outlineRaw.split('\n').map(l=>l.trim()).filter(l=>l.length>5);
+      titles = fb.slice(0, numCh);
     }
+    if(titles.length < 2) throw new Error('Kapitelstruktur konnte nicht generiert werden. Bitte erneut versuchen.');
+    prog(15, '✅ ' + titles.length + ' Kapitel geplant');
     const chapters = [];
+    for(let i=0; i<titles.length; i++){
+      prog(15 + Math.round((i+1)/titles.length*78),
+        '✍️ Kapitel ' + (i+1) + '/' + titles.length + ': ' + titles[i].substring(0,40) + '...');
+      const content = await ask(client, sys,
+        'Write chapter ' + (i+1) + ' of the eBook "' + topic + '"\n' +
+        'Chapter: "' + titles[i] + '"\n' +
+        'Audience: ' + (context||'general readers') + '\n' +
+        'Style: ' + style + '\n' +
+        'Write 400+ words. Multiple paragraphs. Real content only. Start directly.'
       );
+      chapters.push({ title: titles[i], content });
     }
+    prog(98, '📚 Finalisiere...');
+    const intro = 'Dieses eBook wurde für ' + (context||'interessierte Leserinnen und Leser') +
+      ' verfasst und behandelt das Thema "' + topic + '" auf ' + style + 'e Weise.';
+    ebookData = { topic, lang, style, intro, chapters };
+    window.ebookData = ebookData;
+    const wc = chapters.reduce((s,c)=>s+c.content.split(/\s+/).length,0);
+    document.getElementById('sW').textContent = wc.toLocaleString('de-DE');
+    document.getElementById('sC').textContent = chapters.length;
+    document.getElementById('sP').textContent = '~'+Math.round(wc/250);
+    document.getElementById('cList').innerHTML = chapters.map((c,i)=>'<li>Kapitel '+(i+1)+': '+c.title+'</li>').join('');
+    document.getElementById('prev').textContent =
+      topic+'\n'+'='.repeat(50)+'\n\n'+intro+'\n\n'+
+      chapters.map((c,i)=>'Kapitel '+(i+1)+': '+c.title+'\n'+'-'.repeat(40)+'\n'+c.content).join('\n\n');
+    prog(100,'🎉 Fertig!');
     document.getElementById('resultCard').style.display = 'block';
   } catch(err) {
+    showErr(err.message || String(err));
+    document.getElementById('pw').style.display = 'none';
   } finally {
+    document.getElementById('genBtn').disabled = false;
   }
+};
+function buildHTML(){
+  const { topic, lang, style, intro, chapters } = ebookData;
+  const lc = {'German':'de','English':'en','Spanish':'es','French':'fr'}[lang]||'de';
+  const toc = chapters.map((c,i)=>'<li><a href="#ch'+(i+1)+'">Kapitel '+(i+1)+': '+c.title+'</a></li>').join('');
+  const chs = chapters.map((c,i)=>
+    '<div class="ch" id="ch'+(i+1)+'"><div class="cnum">Kapitel '+(i+1)+'</div><h2>'+c.title+'</h2>'+
+    c.content.split('\n\n').filter(p=>p.trim()).map(p=>'<p>'+p.replace(/\n/g,' ')+'</p>').join('')+'</div>'
   ).join('');
+  return '<!DOCTYPE html><html lang="'+lc+'"><head><meta charset="UTF-8"/><title>'+topic+
+    '</title><style>@page{size:6in 9in;margin:1in}body{font-family:Georgia,serif;font-size:11pt;line-height:1.8;color:#1a1a1a;max-width:580px;margin:0 auto;padding:40px 20px}'+
+    '.cover{text-align:center;padding:100px 40px;border-bottom:3px double #333;margin-bottom:60px;page-break-after:always}.cover h1{font-size:24pt;line-height:1.3}'+
+    '.toc{page-break-after:always}.toc h2{font-size:15pt;border-bottom:2px solid #333;padding-bottom:8px;margin-bottom:16px}.toc ul{list-style:none;padding:0}'+
+    '.toc li{padding:7px 0;border-bottom:1px dotted #ccc}.toc a{text-decoration:none;color:#222}'+
+    '.intro{font-style:italic;color:#555;border-left:4px solid #aaa;padding-left:16px;margin:30px 0 50px;page-break-after:always}'+
+    '.ch{page-break-before:always}.cnum{font-size:9pt;text-transform:uppercase;letter-spacing:3px;color:#999;margin-bottom:6px}'+
+    '.ch h2{font-size:17pt;border-bottom:2px solid #222;padding-bottom:10px;margin-bottom:20px}'+
+    'p{margin-bottom:14px;text-align:justify;text-indent:1.5em}p:first-of-type{text-indent:0}</style></head><body>'+
+    '<div class="cover"><h1>'+topic+'</h1><p style="color:#666;margin-top:20px">&copy; '+new Date().getFullYear()+'</p></div>'+
+    '<div class="toc"><h2>Inhaltsverzeichnis</h2><ul>'+toc+'</ul></div>'+
+    '<div class="intro"><p>'+intro+'</p></div>'+chs+'</body></html>';
 }
+window.dlHTML = () => {
   if(!ebookData) return;
   const a = document.createElement('a');
+  a.href = URL.createObjectURL(new Blob([buildHTML()],{type:'text/html;charset=utf-8'}));
   a.download = ebookData.topic.replace(/[^\w\säöüÄÖÜß]/g,'_').substring(0,50)+'_KDP.html';
   a.click();
+};
+window.dlTXT = () => {
   if(!ebookData) return;
   const txt = ebookData.topic+'\n'+'='.repeat(60)+'\n\n'+ebookData.intro+'\n\n'+
     ebookData.chapters.map((c,i)=>'KAPITEL '+(i+1)+': '+c.title.toUpperCase()+'\n'+'-'.repeat(60)+'\n'+c.content).join('\n\n');
   const a = document.createElement('a');
+  a.href = URL.createObjectURL(new Blob([txt],{type:'text/plain;charset=utf-8'}));
   a.download = ebookData.topic.replace(/[^\w\säöüÄÖÜß]/g,'_').substring(0,50)+'_KDP.txt';
   a.click();
+};
 </script>
 </body>
 </html>