Create static/script.js
Browse files- static/script.js +133 -0
static/script.js
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
|
| 2 |
+
<!DOCTYPE html>
|
| 3 |
+
<!--
|
| 4 |
+
_____ .__ ____ ___.__ .___
|
| 5 |
+
/ _ \ |__| \ \ / |__| __| _/____ ____
|
| 6 |
+
/ /_\ \| | \ Y /| |/ __ _/ __ \/ _ \
|
| 7 |
+
/ | | | \ / | / /_/ \ ___( <_> )
|
| 8 |
+
\____|__ |__| \___/ |__\____ |\___ \____/
|
| 9 |
+
\/ \/ \/
|
| 10 |
+
created by rUv
|
| 11 |
+
-->
|
| 12 |
+
<html lang="en">
|
| 13 |
+
<head>
|
| 14 |
+
<meta charset="UTF-8">
|
| 15 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 16 |
+
<title>Media Stream Capture and Analysis</title>
|
| 17 |
+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
|
| 18 |
+
<style>
|
| 19 |
+
body {
|
| 20 |
+
background-color: #f8f9fa;
|
| 21 |
+
}
|
| 22 |
+
.container {
|
| 23 |
+
max-width: 720px;
|
| 24 |
+
margin-top: 20px;
|
| 25 |
+
}
|
| 26 |
+
#video {
|
| 27 |
+
width: 100%;
|
| 28 |
+
height: auto;
|
| 29 |
+
background-color: #ddd;
|
| 30 |
+
margin-bottom: 20px;
|
| 31 |
+
}
|
| 32 |
+
.button-container {
|
| 33 |
+
display: flex;
|
| 34 |
+
flex-direction: column;
|
| 35 |
+
align-items: center;
|
| 36 |
+
}
|
| 37 |
+
.btn-group-toggle {
|
| 38 |
+
display: flex;
|
| 39 |
+
justify-content: center;
|
| 40 |
+
align-items: center;
|
| 41 |
+
width: 100%;
|
| 42 |
+
}
|
| 43 |
+
.btn-group-toggle .btn {
|
| 44 |
+
width: auto;
|
| 45 |
+
margin: 0 10px;
|
| 46 |
+
}
|
| 47 |
+
.btn-group {
|
| 48 |
+
margin-bottom: 10px;
|
| 49 |
+
}
|
| 50 |
+
.btn-secondary.active {
|
| 51 |
+
background-color: #6c757d;
|
| 52 |
+
border-color: #6c757d;
|
| 53 |
+
color: white;
|
| 54 |
+
}
|
| 55 |
+
.settings-panel {
|
| 56 |
+
display: none;
|
| 57 |
+
margin-bottom: 20px;
|
| 58 |
+
}
|
| 59 |
+
.settings-panel .nav-tabs {
|
| 60 |
+
margin-bottom: 10px;
|
| 61 |
+
}
|
| 62 |
+
#formattedMarkdown {
|
| 63 |
+
background-color: #fff;
|
| 64 |
+
border: 1px solid #ddd;
|
| 65 |
+
padding: 10px;
|
| 66 |
+
margin-top: 20px;
|
| 67 |
+
border-radius: 5px;
|
| 68 |
+
max-height: 200px;
|
| 69 |
+
overflow-y: auto;
|
| 70 |
+
}
|
| 71 |
+
</style>
|
| 72 |
+
</head>
|
| 73 |
+
<body>
|
| 74 |
+
<div class="container text-center">
|
| 75 |
+
<h2 class="my-4">GPT-4o Media Stream Capture & Analysis</h2>
|
| 76 |
+
<p class="mb-4">A web app to capture and analyze media streams from your webcam, desktop, or specific apps. Easily switch sources and capture frames at intervals. Use AI for insightful frame analysis and summaries.</p>
|
| 77 |
+
<video id="video" class="mb-4" autoplay></video>
|
| 78 |
+
<div class="button-container">
|
| 79 |
+
<div class="btn-group btn-group-toggle mb-4" data-toggle="buttons">
|
| 80 |
+
<label class="btn btn-secondary">
|
| 81 |
+
<input type="radio" name="options" id="shareWebcam" autocomplete="off"> Share Webcam
|
| 82 |
+
</label>
|
| 83 |
+
<label class="btn btn-secondary">
|
| 84 |
+
<input type="radio" name="options" id="shareScreen" autocomplete="off"> Share Screen
|
| 85 |
+
</label>
|
| 86 |
+
<label class="btn btn-secondary">
|
| 87 |
+
<input type="radio" name="options" id="shareApplication" autocomplete="off"> Share Application
|
| 88 |
+
</label>
|
| 89 |
+
</div>
|
| 90 |
+
<div class="btn-group mb-4">
|
| 91 |
+
<button id="startCapture" class="btn btn-primary">📸 Start Capture</button>
|
| 92 |
+
<button id="stopCapture" class="btn btn-danger">🛑 Stop Capture</button>
|
| 93 |
+
<button id="toggleSettings" class="btn btn-info">⚙️ Settings</button>
|
| 94 |
+
</div>
|
| 95 |
+
|
| 96 |
+
</div>
|
| 97 |
+
<div class="settings-panel card card-body">
|
| 98 |
+
<ul class="nav nav-tabs" id="settingsTabs" role="tablist">
|
| 99 |
+
<li class="nav-item">
|
| 100 |
+
<a class="nav-link active" id="prompt-tab" data-toggle="tab" href="#prompt" role="tab" aria-controls="prompt" aria-selected="true">Prompt</a>
|
| 101 |
+
</li>
|
| 102 |
+
<li class="nav-item">
|
| 103 |
+
<a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
|
| 104 |
+
</li>
|
| 105 |
+
<li class="nav-item">
|
| 106 |
+
<a class="nav-link" id="api-tab" data-toggle="tab" href="#api" role="tab" aria-controls="api" aria-selected="false">API Config</a>
|
| 107 |
+
</li>
|
| 108 |
+
</ul>
|
| 109 |
+
<div class="tab-content" id="settingsTabsContent">
|
| 110 |
+
<div class="tab-pane fade show active" id="prompt" role="tabpanel" aria-labelledby="prompt-tab">
|
| 111 |
+
<textarea id="customPrompt" class="form-control" rows="3" placeholder="Enter custom prompt here...">Analyze this frame</textarea>
|
| 112 |
+
</div>
|
| 113 |
+
<div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
|
| 114 |
+
<input type="number" id="refreshRate" class="form-control" placeholder="Refresh rate in seconds" value="15">
|
| 115 |
+
</div>
|
| 116 |
+
<div class="tab-pane fade" id="api" role="tabpanel" aria-labelledby="api-tab">
|
| 117 |
+
<input type="text" id="apiKey" class="form-control" placeholder="OpenAI API Key" value="">
|
| 118 |
+
</div>
|
| 119 |
+
<button id="saveSettings" class="btn btn-success mt-3">Save Settings</button>
|
| 120 |
+
</div>
|
| 121 |
+
</div>
|
| 122 |
+
<div id="formattedMarkdown" class="text-left"></div>
|
| 123 |
+
</div>
|
| 124 |
+
<div class="container text-center">
|
| 125 |
+
created by rUv
|
| 126 |
+
</div>
|
| 127 |
+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
| 128 |
+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
|
| 129 |
+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
| 130 |
+
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
| 131 |
+
<script src="/static/script.js"></script>
|
| 132 |
+
</body>
|
| 133 |
+
</html>
|