LocalSort-AI/index.html at main · SudoVoid254/LocalSort-AI · 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LocalSort-AI | Privacy-First Media Organizer</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <link rel="manifest" href="manifest.json">
    <link rel="icon" type="image/png" href="icons/icon-192.png">
    <!-- Suppress some Permissions-Policy warnings if possible -->
    <meta http-equiv="Permissions-Policy" content="interest-cohort=()">
</head>
<body>
    <div id="app">
        <header>
            <h1>LocalSort-AI</h1>
            <nav id="stepper">
                <div class="step active" data-step="INPUT">Input</div>
                <div class="step" data-step="LABELING">Labeling</div>
                <div class="step" data-step="CONFIG">Configuration</div>
                <div class="step" data-step="PREVIEW">Preview</div>
                <div class="step" data-step="EXECUTION">Execution</div>
            </nav>
        </header>

        <main id="view-container">
            <!-- Views will be injected here by ui-handler.js -->
            <section id="view-INPUT" class="view active">
                <div class="card">
                    <h2>Select Media Folder</h2>
                    <p>Choose the directory containing the photos and videos you want to organize. Everything stays local.</p>

                    <div class="custom-labels-container">
                        <label class="labels-label">Custom AI Labels (comma separated):</label>
                        <div class="labels-input-group">
                            <input type="text" id="custom-labels-input" placeholder="e.g. beach, mountain, wedding">
                            <button id="btn-update-labels" class="primary-btn">Set Labels</button>
                        </div>
                        <p class="labels-hint">
                            The AI will use these categories for the analysis. Leave blank for defaults.
                        </p>
                    </div>


                    <button id="btn-select-folder" class="primary-btn">Select Folder</button>
                </div>
            </section>

            <section id="view-LABELING" class="view">
                <div class="card">
                    <h2>AI Labeling in Progress</h2>
                    <p>Analyzing your media with a local CLIP model...</p>
                    <div class="progress-container">
                        <div id="label-progress-bar" class="progress-bar"></div>
                    </div>
                    <div id="label-status">Initializing model...</div>
                    <div id="label-log" class="log-container">
                        <div>Waiting for analysis to start...</div>
                    </div>
                </div>
            </section>

            <section id="view-CONFIG" class="view">
                <div class="card">
                    <h2>Sorting Configuration</h2>
                    <p>Define how you want your files organized.</p>
                    <div id="config-help"></div>
                    <div id="rules-container"></div>
                    <div class="rules-actions">
                        <button id="btn-add-rule" class="secondary-btn">+ Add Rule</button>
                        <select id="preset-select" class="secondary-btn">
                            <option value="">Load Preset...</option>
                            <option value="date-label">Organize by Label/Date</option>
                            <option value="camera-model">Organize by Camera/Date</option>
                            <option value="simple-label">Simple Label Folders</option>
                        </select>
                    </div>

                    <div class="threshold-container card-inset" style="margin-top: 20px; text-align: left;">
                        <label class="labels-label">Confidence Threshold: <span id="threshold-value">50%</span></label>
                        <input type="range" id="threshold-slider" min="0" max="100" value="50" style="width: 100%">
                        <p class="labels-hint">Files below this confidence will go to "Review_Required" folder.</p>
                    </div>
                    <div class="actions">
                        <button id="btn-to-preview" class="primary-btn">Preview Structure</button>
                    </div>
                </div>
            </section>

            <section id="view-PREVIEW" class="view">
                <div class="card">
                    <h2>Proposed Organization</h2>

                    <div class="preview-controls">
                        <div class="search-group">
                            <input type="text" id="preview-search" placeholder="Search by label or filename...">
                            <select id="filter-confidence">
                                <option value="0">All Confidence</option>
                                <option value="0.7">> 70% Confidence</option>
                                <option value="0.9">> 90% Confidence</option>
                                <option value="low">Review Required (&lt; Threshold)</option>
                            </select>
                        </div>
                    </div>

                    <div id="preview-gallery" class="gallery-container">
                        <!-- Thumbnails will be injected here -->
                    </div>

                    <div class="preview-grid">
                        <div class="preview-pane">
                            <h3>Current Structure</h3>
                            <div id="current-tree" class="tree-view"></div>
                        </div>
                        <div class="preview-pane">
                            <h3>Proposed Structure</h3>
                            <div id="proposed-tree" class="tree-view"></div>
                        </div>
                    </div>
                    <div class="actions">
                        <button id="btn-back-to-config" class="secondary-btn">Edit Rules</button>
                        <button id="btn-apply-changes" class="primary-btn danger">Apply Changes</button>
                    </div>
                </div>
            </section>

            <section id="view-EXECUTION" class="view">
                <div class="card">
                    <h2>Applying Changes</h2>
                    <div class="progress-container">
                        <div id="execution-progress-bar" class="progress-bar"></div>
                    </div>
                    <div id="execution-status">Moving files...</div>
                    <div class="actions">
                        <button id="btn-rollback" class="secondary-btn">Rollback Changes</button>
                        <button id="btn-finish-execution" class="primary-btn">Done</button>
                    </div>
                </div>
            </section>
        </main>

        <footer>
            <div id="status-bar">
                <span id="fs-status">📁 No folder selected</span>
                <span id="ai-status">🧠 AI: Offline</span>
            </div>
        </footer>
    </div>

    <script type="module" src="js/app.js"></script>
</body>
</html>