Hugging Face's logo

Spaces:
nsinghh03
/
CISS-Web-App
Sleeping

App Files Community
CISS-Web-App
File size: 6,115 Bytes 
d8afa61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Experiment Auto-Labeler</title>
    <base href="/">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="container">
        <!-- Initial Screen -->
        <div class="card" id="initialScreen">
            <h1>Stranger Danger Auto-Labeling</h1>
            <div class="option-grid">
                <div class="option-card" onclick="showUploadScreen('sharepoint')">
                    <i class="fab fa-microsoft"></i>
                    <h3>SharePoint</h3>
                    <p>Access videos from SharePoint</p>
                </div>
                <div class="option-card" onclick="showUploadScreen('local')">
                    <i class="fas fa-upload"></i>
                    <h3>Local Upload</h3>
                    <p>Upload from your device</p>
                </div>
            </div>
        </div>

        <!-- SharePoint Credentials Screen -->
        <div class="card hidden" id="sharepointCredScreen">
            <h2>SharePoint Connection</h2>
            <form id="spCredForm" onsubmit="handleSpCredSubmit(event)">
                <div class="form-group">
                    <label>Site URL</label>
                    <input type="url" id="spSiteUrl" required placeholder="https://yourdomain.sharepoint.com/sites/yoursite">
                </div>
                <div class="form-group">
                    <label>Client ID</label>
                    <input type="text" id="spClientId" required placeholder="a1b2c3d4-e5f6-7g8h-9i0j-k1l2m3n4o5p6">
                </div>
                <div class="form-group">
                    <label>Client Secret</label>
                    <input type="password" id="spClientSecret" required placeholder="ABC123~abcdefghijklmnopqrstuvwxyz">
                </div>
                <div class="form-group">
                    <label>Document Library</label>
                    <input type="text" id="spDocLibrary" value="Documents" required>
                </div>
                <button type="submit" class="btn">
                    <i class="fas fa-check"></i> Connect
                </button>
                <button type="button" class="btn secondary" onclick="showScreen('initialScreen')">
                    <i class="fas fa-arrow-left"></i> Back
                </button>
            </form>
        </div>

        <!-- SharePoint File Selection -->
        <div class="card hidden" id="sharepointFileScreen">
            <h2>Select SharePoint File</h2>
            <div id="spFileList"></div>
            <button class="btn secondary" onclick="showScreen('sharepointCredScreen')">
                <i class="fas fa-arrow-left"></i> Back
            </button>
        </div>

        <!-- Local Upload Screen -->
        <div class="card hidden" id="localUploadScreen">
            <h2>Upload Video</h2>
            <div class="upload-area" id="dropZone">
                <i class="fas fa-cloud-upload-alt"></i>
                <p>Drag & drop or click to upload</p>
                <input type="file" id="videoInput" hidden accept="video/*">
            </div>
            <div class="preview-container">
                <video id="videoPreview" class="hidden" controls></video>
            </div>
            
            <!-- Add timestamp inputs -->
            <div class="timestamp-group">
                <div class="form-group">
                    <label>Start Time (HH:MM:SS)</label>
                    <input type="text" id="timestamp1" required 
                           pattern="^([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$"
                           placeholder="00:00:00">
                </div>
                <div class="form-group">
                    <label>Transition Time (HH:MM:SS)</label>
                    <input type="text" id="timestamp2" required 
                           pattern="^([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$"
                           placeholder="00:00:00">
                </div>
                <div class="form-group">
                    <label>End Time (HH:MM:SS)</label>
                    <input type="text" id="timestamp3" required 
                           pattern="^([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$"
                           placeholder="00:00:00">
                </div>
            </div>
        
            <button class="btn" id="analyzeBtn" disabled>
                <i class="fas fa-play"></i> Start Analysis
            </button>
            <button class="btn secondary" onclick="showScreen('initialScreen')">
                <i class="fas fa-arrow-left"></i> Back
            </button>
        </div>

        <!-- Progress Screen -->
        <div class="card hidden" id="progressScreen">
            <h2>Analyzing Video</h2>
            <div class="progress-container">
                <div class="progress-bar" id="progressBar"></div>
                <div id="frameCounter"></div>
            </div>
            <p id="progressMessage">Initializing analysis... Do not cancel</p>
            <div class="button-group">
                <button class="btn danger" id="cancelBtn" onclick="cancelAnalysis()">
                    <i class="fas fa-stop-circle"></i> Cancel Analysis
                </button>
            </div>
        </div>

        <!-- Results Screen -->
        <div class="card hidden" id="resultsScreen">
            <h2>Analysis Complete!</h2>
            <div class="result-badge">
                <i class="fas fa-check-circle"></i>
            </div>
            <button class="btn" id="downloadBtn">
                <i class="fas fa-download"></i> Download Report
            </button>
            <button class="btn secondary" id="newAnalysisBtn">
                <i class="fas fa-redo"></i> New Analysis
            </button>
        </div>
    </div>
    <script src="/static/script.js"></script>
</body>
</html>