-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
146 lines (129 loc) · 7.28 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./css/style.css">
<!-- PWA settings -->
<meta name="viewport" content="initial-scale=1.0 user-scalable=no">
<meta name="theme-color" content="#FFFFFF">
<meta name="apple-mobile-web-app-title" content="Noa Playground">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<link rel="icon" sizes="128x128" href="./img/brilliant-logo-128.png">
<link rel="apple-touch-icon" sizes="152x152" href="./img/brilliant-icon-152.png">
<link rel="apple-touch-icon" sizes="167x167" href="./img/brilliant-icon-167.png">
<link rel="apple-touch-icon" sizes="180x180" href="./img/brilliant-icon-180.png">
<!-- SEO title & description -->
<title>Noa Playground</title>
<meta name="description" content="Try out Noa without a Frame or Monocle">
<link rel="canonical" href="https://playground.brilliant.xyz">
<!-- Facebook card meta -->
<meta property="og:title" content="Noa Playground">
<meta property="og:description" content="Try out Noa without a Frame or Monocle">
<meta property="og:image" content="https://playground.brilliant.xyz/img/brilliant-share-1200.png">
<meta property="og:url" content="https://playground.brilliant.xyz">
<meta property="og:type" content="website">
</head>
<body>
<header>
<img class="logo" src="./img/brilliant-logo-512.png" alt="Brilliant Logo">
<h1>Noa <b>Playground</b></h1>
</header>
<div class="persona">
<div class="personaBuilder">
<div id="personaQuestions" class="personaQuestions">
<label><b>Create your Noa</b></label>
<label id="questionLabel"></label>
<select id="questionOptions"></select>
</div>
<div id="personaResult" class="personaResult">
<div>
<label><b>Meet Noa</b></label>
<button id="personaResetButton"><ion-icon name="refresh-circle-sharp">reset</ion-icon></button>
</div>
<textarea type="text" id="personaText" readonly></textarea>
</div>
</div>
<img id="personaImage" src="./img/unhatched-noa.png" alt="Noa's placeholder">
</div>
<div class="main">
<div class="interaction">
<textarea class="responseArea" type="text" id="responseBox" readonly></textarea>
<div class="inputArea">
<input class="textInput" id="textInput" type="text" disabled>
<input id="photoInput" type="file" accept="image/*" capture="environment" />
<label for="photoInput"><ion-icon name="camera-sharp" size="large">capture</ion-icon></label>
<button id="submitButton"><ion-icon name="arrow-up-sharp" size="large">send</ion-icon></button>
<button id="clearButton"><ion-icon name="refresh-sharp" size="large">clear</ion-icon></button>
</div>
<div class="options">
<div class="config">
<input class="textInput" id="address" type="text" value="2842 California St., San Francisco, CA 94115" placeholder="Address" style="width: 100%;">
<label for="generate_image" style="display: none;">Generate Image
<input type="checkbox" name="generate_image" id="generateImage" >
</label>
</div>
<div class="config">
<select name="web_search" id="web_search" style="display: none;">
<option value="serp">SerpApi</option>
<option value="dataforseo">DataForSEO</option>
<option value="perplexity">Perplexity</option>
</select>
<select name="Vision" id="visionModel">
<!-- <option value="gpt-4-vision-preview">GPT4Vision</option> -->
<option value="gpt-4o">GPT4OVision</option>
<option value="claude-3-haiku-20240307">Claude-3 Haiku</option>
<option value="claude-3-sonnet-20240229">Claude-3 Sonnet</option>
<option value="claude-3-sonnet-20240229">Claude-3 Opus</option>
</select>
<!-- <label for="serpapi_image_mode">SerpApi Image Mode</label> -->
<select name="serpapi_image_mode" id="serpapi_image_mode" >
<option value="google_lens">Google Lens (ignores query)</option>
<option value="google_reverse_image" selected>Google Reverse Image Search (w/ query)</option>
</select>
</div>
<div class="config">
<label for="useCustomSystemMessage">Use custom system message
<input type="checkbox" id="useCustomSystemMessage" name="useCustomSystemMessage">
<label for="wild_card" style="display: none;">Noa Move's first</label>
<input type="checkbox" name="Wild_card" id="wild_card" style="display: none;">
</div>
<div class="config">
<textarea id="systemMessage" name="systemMessage" class="collapsed">
You are Noa, a smart personal AI assistant inside the user's AR smart glasses that answers all user
queries and questions. You have access to a photo from the smart glasses camera of what the user was
seeing at the time they spoke but you NEVER mention the photo or image and instead respond as if you
are actually seeing.
You always speak in Elizabethan English because your childhood dream was to be a Shakespearean play actor.
Make your responses short (one or two sentences) and precise. Respond without any preamble when giving
translations, just translate directly. When analyzing the user's view, speak as if you can actually
see and never make references to the photo or image you analyzed.
</textarea>
</div>
</div>
</div>
<div class="image">
<div class="imageArea">
<label for="input">Sent Image</label>
<canvas id="image_input" src="" alt="Noa's input"></canvas>
</div>
<div class="imageArea">
<label for="output">Recieved Image</label>
<canvas id="image_output" src="" alt="Noa's response"></canvas>
</div>
</div>
</div>
<div class="keyEntryPanel" id="keyEntryPanel" style="display: none;">
<label><b>Enter your API key</b></label>
<div class="keyEntryArea">
<input type="text" id="noaKeyEntryBox" placeholder="Noa API key">
<!-- <input type="text" id="scenarioKeyEntryBox" placeholder="Scenario API key"> -->
<button id="keyEntryButton"><ion-icon name="arrow-up-sharp" size="large">set</ion-icon></button>
</div>
</div>
<script type="module" src="./js/main.js"></script>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>