-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
158 lines (143 loc) · 5.83 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
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" type="image/png" href="/gemini.svg" />
<title>Using Gemini and Google Maps Platform</title>
</head>
<body>
<main>
<p>See <strong>src/main.ts</strong> for instructions to get API keys needed for this project.</p>
<h1>Using Gemini and Google Maps Platform</h1>
<p>Select a destination from the images below:</p>
<form>
<div class="image-picker">
<label class="image-choice">
<input
type="radio"
checked
name="chosen-image"
value="/reichstag.jpeg"
/>
<img src="/reichstag.jpeg" />
</label>
<label class="image-choice">
<input type="radio" name="chosen-image" value="/waterfall.jpeg" />
<img src="/waterfall.jpeg" />
</label>
<label class="image-choice">
<input type="radio" name="chosen-image" value="/beach.jpeg" />
<img src="/beach.jpeg" />
</label>
</div>
<div class="prompt-box">
<!-- <label>
<input name="prompt" placeholder="Where do you want to go" type="text"
value="Where can I see this place? Just the place name, please.">
</label> -->
<button type="submit">Where can I see this?</button>
</div>
</form>
<section class="container">
<div class="container-header">
<h2 class="output">(Results will appear here)</h2>
<!-- <div class="weather-info">Weather data will be displayed here</div> -->
</div>
<div id="map-layout">
<gmpx-split-layout id="split-layout" row-reverse="true">
<div id="map" slot="main"></div>
</gmpx-split-layout>
</div>
</section>
<!-- Reviews -->
<section class="review-container">
<div class="container">
<div class="container-header">
<h2>Trip review</h2>
</div>
<div class="reviews">
<div id="validate-model"></div>
<div id="model-wrapper">
<input
type="text"
hidden
id="prompt-title"
placeholder="Review title"
/>
<textarea
id="prompt-text"
rows="10"
cols="50"
placeholder="Write review here"
id="prompt-text"
>
I recently returned from a delightful trip here and I can't recommend it enough! This sunny location proved to be the perfect place to unwind and soak up some rays.
From the moment I arrived, I was struck by the warmth and hospitality of the local people. Everyone I encountered, from shopkeepers to fellow tourists, seemed genuinely friendly and helpful. The positive energy was contagious!
I was thrilled with the culinary scene. The restaurants offered a fantastic mix of fresh, flavorful dishes featuring local ingredients. Whether I was craving [type of food] or something more adventurous, I found delicious options at every turn.
Of course, the main draw of this trip was the stunning scenery. I spent hours exploring the landscape - beaches, mountains, etc. The natural beauty of the area was simply breathtaking.
Overall, this trip was everything I could have hoped for and more. It's a place I'd love to visit again and a destination I wholeheartedly recommend to anyone seeking a balance of relaxation, good food, and friendly faces.
</textarea
>
</div>
</div>
</div>
<div class="container" id="prettier-version">
<div class="container-header">
<h2>Prettier version</h2>
<button id="clear">Clear</button>
</div>
<div class="content">
<p id="ai-output">
<span class="ai-output-placeholder">(Results will be here)</span>
</p>
<p id="ai-output-stream"></p>
<p id="ai-output-tone"></p>
</div>
</div>
</section>
<div class="buttons-container">
<button id="ai-button" hidden>Run AI</button>
<button id="ai-button-stream" hidden>Run AI Stream</button>
<button id="generate-title">Generate Title</button>
<button id="rewrite-review">Summarize</button>
<button id="check-toxicity">Check Tone</button>
</div>
<section class="attributions">
<h2>Attributions</h2>
<ol>
<li>
Building:
<a
href="https://commons.wikimedia.org/wiki/File:Reichstagsgeb%C3%A4ude_bei_Nacht,_Berlin-Mitte,_170325,_ako.jpg"
>Ansgar Koreng</a
>,
<a href="https://creativecommons.org/licenses/by-sa/3.0"
>CC BY-SA 3.0</a
>, via Wikimedia Commons
</li>
<li>
Garden:
<a
href="https://commons.wikimedia.org/wiki/File:The_Fall_in_the_Cloud_Forest,_Gardens_by_the_Bay,_Singapore_-_20120617-01.jpg"
>Allie Caulfield.</a
>,
<a href="https://creativecommons.org/licenses/by/2.0">CC BY 2.0</a>,
via Wikimedia Commons
</li>
<li>
Beach:
<a href="https://commons.wikimedia.org/wiki/File:Mia_lifeg.jpeg"
>Cristo Vlahos</a
>,
<a href="https://creativecommons.org/licenses/by-sa/4.0"
>CC BY-SA 4.0</a
>, via Wikimedia Commons
</li>
</ol>
</section>
</main>
<script type="module" src="/src/main.ts"></script>
<script type="module" src="/src/travel.js"></script>
</body>
</html>