Hugging Face's logo

Spaces:
foreversheikh
/
new_fix
No application file

App Files Community
new_fix
File size: 5,669 Bytes 
8ad412d
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
<!-- <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Real-Time Anomaly Detection</title>

    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

</head>

<body>

    <div class="container">

        <main class="main-content">

            <div class="header">

                <h1>Anomaly Detection Dashboard</h1>

                <button id="resetButton">Reset</button>

            </div>



            <div class="dashboard-grid">

                

                <div class="video-area">

                    <div class="video-wrapper">

                        <video id="videoPlayer" width="100%" controls muted>

                            Your browser does not support the video tag.

                        </video>

                    </div>

                    <p id="statusLabel">Select a video to begin.</p>

                </div>

                

                <div class="chart-container">

                    <h3>Live Anomaly Score</h3>

                    <canvas id="anomalyChart"></canvas>

                </div>



            </div>

        </main>



        <aside class="sidebar">

            <h2>Demo Videos</h2>

            <select id="anomalySelector" class="custom-select">

                <option value="" disabled selected>Select a Demo Video...</option>

                {% for name in anomaly_names %}

                <option value="{{ name }}">{{ name }}</option>

                {% endfor %}

            </select>

            

            <hr class="separator">

            <h2>Upload Your Own</h2>

            <div class="upload-section">

                <input type="file" id="videoUpload" accept="video/mp4, video/mov, video/avi">

                <button id="uploadButton">Analyze Uploaded Video</button>

            </div>

            

            <hr class="separator">



            <div class="yolo-container">

                <h3>YOLO Detection Result</h3>

                <p id="yoloTextLabel">Waiting for anomaly...</p>

                <img id="yoloImageFrame" src="" alt="YOLO Frame Preview">

            </div>

        </aside>

    </div>



    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script src="{{ url_for('static', filename='js/main.js') }}"></script>

</body>

</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-Time Anomaly Detection</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="container">
        <main class="main-content">
            <div class="header">
                <h1>Anomaly Detection Dashboard</h1>
                <button id="resetButton">Reset</button>
            </div>

            <div class="dashboard-grid">
                
                <div class="video-area">
                    <div class="video-wrapper">
                        <video id="videoPlayer" width="100%" controls muted>
                            Your browser does not support the video tag.
                        </video>
                    </div>
                    <p id="statusLabel">Select a video to begin.</p>
                </div>
                
                <div class="results-column">
                    <div class="chart-container">
                        <h3>Live Anomaly Score</h3>
                        <canvas id="anomalyChart"></canvas>
                    </div>
                    
                    <div class="summary-container">
                        <h3>Video Summary</h3>
                        
                        <div class="loader-container" id="summaryLoaderContainer" style="display: none;">
                            <div class="loader"></div>
                            <p>Summarizing 30s clip... (this may take a minute)</p>
                        </div>
                        
                        <p id="summaryTextLabel">Summary will appear here after analysis...</p>
                    </div>
                </div>

            </div>
        </main>

        <aside class="sidebar">
            <h2>Demo Videos</h2>
            <select id="anomalySelector" class="custom-select">
                <option value="" disabled selected>Select a Demo Video...</option>
                {% for name in anomaly_names %}
                <option value="{{ name }}">{{ name }}</option>
                {% endfor %}
            </select>
            
            <hr class="separator">
            <h2>Upload Your Own</h2>
            <div class="upload-section">
                <input type="file" id="videoUpload" accept="video/mp4, video/mov, video/avi">
                <button id="uploadButton">Analyze Uploaded Video</button>
            </div>
            
            <hr class="separator">

            <div class="yolo-container">
                <h3>YOLO Detection Result</h3>
                <p id="yoloTextLabel">Waiting for anomaly...</p>
                <img id="yoloImageFrame" src="" alt="YOLO Frame Preview">
            </div>
        </aside>
    </div>

    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>