sqlite_invokeai_db_tool/index.html at main · Pfannkuchensack/sqlite_invokeai_db_tool · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title data-i18n="appTitle">Tool for InvokeAI DB</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1 data-i18n="appTitle">Tool for InvokeAI DB</h1>

    <div class="language-selector">
      <label for="language-select" data-i18n="languageLabel">Language:</label>
      <select id="language-select" onchange="translateUI(this.value)">
        <option value="en" data-i18n="languageEN">English</option>
        <option value="de" data-i18n="languageDE">Deutsch</option>
      </select>
    </div>

    <div class="setup-section">
      <div class="input-group">
        <label for="db-path" data-i18n="dbLabel">SQLite Datenbank:</label>
        <div class="input-with-button">
          <input type="text" id="db-path" readonly>
          <button id="select-db" data-i18n="selectButton">Auswählen</button>
        </div>
      </div>

      <div class="input-group">
        <label for="output-dir" data-i18n="outputDirLabel">Ausgabeverzeichnis:</label>
        <div class="input-with-button">
          <input type="text" id="output-dir" readonly>
          <button id="select-output" data-i18n="selectButton">Auswählen</button>
        </div>
      </div>

      <!-- Tabellennamen sind fest auf "images" gesetzt -->

      <!-- Bildspaltenname ist fest auf "image_name" gesetzt -->

      <button id="sync-button" class="primary-button" disabled data-i18n="syncButton">Datenbank synchronisieren</button>
      <button id="sync-thumbnails-button" class="primary-button" disabled data-i18n="syncThumbnailsButton">Thumbnails synchronisieren</button>
    </div>

    <!-- Model-Pfad-Management Sektion -->
    <div class="model-management-section">
      <h2 data-i18n="modelManagementTitle">Model-Pfad-Verwaltung</h2>

      <div class="model-path-actions">
        <button id="load-models-button" class="primary-button" disabled data-i18n="loadModelsButton">Models laden</button>
        <button id="update-paths-button" class="primary-button" disabled data-i18n="updatePathsButton">Pfade aktualisieren</button>
      </div>

      <div class="path-replacement-section">
        <h3 data-i18n="pathReplacementTitle">Pfad-Ersetzung</h3>
        <div class="replacement-inputs">
          <div class="input-group">
            <label for="old-path" data-i18n="oldPathLabel">Alter Pfad (oder Teil):</label>
            <input type="text" id="old-path" placeholder="z.B. C:\old\path oder old_folder">
          </div>
          <div class="input-group">
            <label for="new-path" data-i18n="newPathLabel">Neuer Pfad (oder Teil):</label>
            <input type="text" id="new-path" placeholder="z.B. D:\new\path oder new_folder">
          </div>
        </div>
      </div>

      <div class="type-replacement-section">
        <h3 data-i18n="modelTypeManagementTitle">Model-Type-Verwaltung</h3>
        <p data-i18n="selectModelsHint">Wählen Sie die Models aus, deren config-type geändert werden soll:</p>
        <div class="replacement-inputs">
          <div class="input-group">
            <label for="new-type" data-i18n="newTypeLabel">Neuer Type:</label>
            <input type="text" id="new-type" placeholder="z.B. main">
          </div>
        </div>
        <div class="model-type-actions">
          <button id="update-types-button" class="primary-button" disabled data-i18n="updateTypesButton">Ausgewählte Types aktualisieren</button>
        </div>
      </div>
    </div>

    <!-- Models-Ergebnisse -->
    <div class="models-results-section">
      <div class="results-panel" id="models-panel">
        <h3><span data-i18n="modelsTitle">Models</span> <span id="models-count">(0)</span></h3>
        <div class="models-list" id="models-list"></div>
      </div>
    </div>

    <div class="results-section">
      <div class="results-container">
        <!-- Zu löschende Einträge -->
        <div class="results-panel" id="removed-entries">
          <h3><span data-i18n="removedEntriesTitle">Zu löschende Einträge</span> <span id="removed-count">(0)</span></h3>
          <div class="action-buttons">
            <button id="remove-entries" class="action-button" disabled data-i18n="removeEntriesButton">Einträge löschen</button>
          </div>
          <div class="results-list" id="removed-entries-list"></div>
        </div>

        <!-- Fehlende DB-Einträge -->
        <div class="results-panel" id="missing-entries">
          <h3><span data-i18n="missingEntriesTitle">Fehlende DB-Einträge</span> <span id="missing-entries-count">(0)</span></h3>
          <div class="action-buttons">
            <button id="restore-db-entries" class="action-button" disabled data-i18n="restoreDbEntriesButton">DB-Einträge wiederherstellen</button>
          </div>
          <div class="results-list" id="missing-entries-list"></div>
        </div>

        <!-- Fehlende Thumbnails -->
        <div class="results-panel" id="missing-thumbnails">
          <h3><span data-i18n="missingThumbnailsTitle">Fehlende Thumbnails</span> <span id="missing-thumbnails-count">(0)</span></h3>
          <div class="action-buttons">
            <button id="restore-thumbnails" class="action-button" disabled data-i18n="restoreThumbnailsButton">Thumbnails wiederherstellen</button>
          </div>
          <div class="results-list" id="missing-thumbnails-list"></div>
        </div>
      </div>
    </div>

    <div id="status-bar" data-i18n="ready">Bereit</div>
  </div>

  <script src="translations.js"></script>
  <script src="renderer.js"></script>
</body>
</html>