160 lines
5.9 KiB
HTML
160 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>GenerateIt</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<link rel="stylesheet" href="/static/style.css" />
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>GenerateIt</h1>
|
||
|
||
<div class="panel image-nav">
|
||
<div class="image-nav-left">
|
||
<button id="prevImageBtn" type="button">⬅️</button>
|
||
<span>Bild: <code id="currentImageName">{{ current_image or "–" }}</code></span>
|
||
<button id="nextImageBtn" type="button">➡️</button>
|
||
<button id="generateDetailsBtn" type="button">✨ KI‑Details</button>
|
||
<button id="generateSentenceBtn" type="button">💬 KI‑Sentence</button>
|
||
</div>
|
||
<div class="page-switch">
|
||
<select id="pageSelect">
|
||
<option value="/draw">DrawIt</option>
|
||
<option value="/generate" selected>GenerateIt</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main-layout">
|
||
<div class="objects-pane sidebar-section">
|
||
<h2>Objekte zu diesem Bild</h2>
|
||
<div id="objectsList" class="objects-list">
|
||
<!-- Wird per JS gefüllt -->
|
||
</div>
|
||
<div id="objectsTags" class="objects-tags">
|
||
<!-- Tags mit Objektnamen -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="right-pane">
|
||
<div class="sidebar-section">
|
||
<h2>Details</h2>
|
||
<div class="sidebar-row">
|
||
<label>Titel</label>
|
||
<div id="detailTitle" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Position</label>
|
||
<div id="detailPosition" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Status (sitzt/schwimmt/segelt)</label>
|
||
<div id="detailAction" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Zustand (alt/jung/rostig)</label>
|
||
<div id="detailCondition" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Hierarchie</label>
|
||
<div id="detailHierarchy" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Gehört zu (Parent-Index)</label>
|
||
<div id="detailParent" class="detail-value"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-section">
|
||
<h2>KI‑Details</h2>
|
||
<div class="sidebar-row">
|
||
<label>Label (EN)</label>
|
||
<div id="detailLabelEn" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Label (DE)</label>
|
||
<div id="detailLabelDe" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Label (SE)</label>
|
||
<div id="detailLabelSe" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Farbe (EN)</label>
|
||
<div id="detailColorEn" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Adjektiv (EN)</label>
|
||
<div id="detailAdjectiveEn" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Action Verb (EN)</label>
|
||
<div id="detailActionVerbEn" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Präposition (EN)</label>
|
||
<div id="detailPrepositionEn" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Relative Position (EN)</label>
|
||
<div id="detailRelativePositionEn" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Season (EN)</label>
|
||
<div id="detailSeasonEn" class="detail-value"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-section">
|
||
<h2>KI‑Sentence</h2>
|
||
<h3 style="font-size: 0.9rem; margin-top: 0; margin-bottom: 8px; color: #475569;">Einfach (für Kinder)</h3>
|
||
<div class="sidebar-row">
|
||
<label>Question (EN)</label>
|
||
<div id="detailSentenceQuestionSimple" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Answer (EN)</label>
|
||
<div id="detailSentenceAnswerSimple" class="detail-value"></div>
|
||
</div>
|
||
<h3 style="font-size: 0.9rem; margin-top: 12px; margin-bottom: 8px; color: #475569;">Fortgeschritten</h3>
|
||
<div class="sidebar-row">
|
||
<label>Question (EN)</label>
|
||
<div id="detailSentenceQuestionAdvanced" class="detail-value"></div>
|
||
</div>
|
||
<div class="sidebar-row">
|
||
<label>Answer (EN)</label>
|
||
<div id="detailSentenceAnswerAdvanced" class="detail-value"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sentences-pane">
|
||
<div class="sidebar-section">
|
||
<h2>Alle Sätze</h2>
|
||
<div id="sentencesList" class="sentences-list">
|
||
<!-- Wird per JS gefüllt -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
(function () {
|
||
window.isGeneratePage = true;
|
||
const pageSelect = document.getElementById("pageSelect");
|
||
if (pageSelect) {
|
||
pageSelect.addEventListener("change", (e) => {
|
||
window.location.href = e.target.value;
|
||
});
|
||
}
|
||
window.initialImages = {{ images|tojson|safe }};
|
||
window.initialImageIndex = {{ current_index if current_index is not none else -1 }};
|
||
})();
|
||
</script>
|
||
<script src="/static/script.js"></script>
|
||
</body>
|
||
</html>
|
||
|