-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (164 loc) · 10.2 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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/main.css">
<link rel="shortcut icon" href="https://chat.openai.com/favicon.ico" type="image/x-icon">
<style>
.right2 {
display: none;
}
</style>
<title>New chat</title>
</head>
<body class="bg-chatblack-50">
<div class="flex h-[100vh] text-white">
<div class="left bg-[#202123] w-2/12">
<button
class="w-[90%] py-2 m-2 px-10 space-x-2 border-white border rounded-md flex mx-4 justify-start items-center hover:opacity-70">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<span>New Chat</span>
</button>
<div class="text-xs m-4 mx-8 text-gray-400">Today</div>
<div class="chats flex flex-col justify-center items-center space-y-2">
{% for chat in myChats %}
<div class="chat space-x-2 opacity-80 w-[90%] px-5 py-2 rounded-md bg-gray-600 cursor-pointer flex justify-start items-center">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="h-4 w-4" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<span>{{chat.question}}</span>
</div>
{% endfor %}
</div>
</div>
<div class="right1 w-10/12 flex justify-center items-center flex-col">
<div class="text-center w-full text-4xl font-bold my-10">
ChatGPT
</div>
<div class="itemsrow flex py-4 w-[43vw] justify-around">
<div class="examples flex flex-col justify-center items-center">
<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="h-6 w-6" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
<div class="py-4">Examples</div>
<button
class="bg-gray-600 w-[13vw] text-sm hover:bg-gray-700 py-4 px-4 mx-4 my-2 rounded-md">"Explain
quantum computing in simple terms" →</button>
<button class="bg-gray-600 w-[13vw] text-sm hover:bg-gray-700 py-4 px-4 mx-4 my-2 rounded-md">"Got
any creative ideas for a 10 year old’s birthday?" →</button>
<button class="bg-gray-600 w-[13vw] text-sm hover:bg-gray-700 py-4 px-4 mx-4 my-2 rounded-md">"How
do I make an HTTP request in Javascript?" →</button>
</div>
<div class="cap flex flex-col justify-center items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"></path>
</svg>
<div class="py-4">Capabilities</div>
<button
class="bg-gray-600 w-[13vw] text-sm hover:bg-gray-700 py-4 px-4 mx-4 my-2 rounded-md">Remembers
what user said earlier in the conversation</button>
<button
class="bg-gray-600 w-[13vw] text-sm hover:bg-gray-700 py-4 px-4 mx-4 my-2 rounded-md">Allows
user to provide follow-up corrections</button>
<button
class="bg-gray-600 w-[13vw] text-sm hover:bg-gray-700 py-4 px-4 mx-4 my-2 rounded-md">Trained
to decline inappropriate requests</button>
</div>
<div class="lim flex flex-col justify-center items-center">
<svg stroke="currentColor" fill="none" stroke-width="1.5" viewBox="0 0 24 24" stroke-linecap="round"
stroke-linejoin="round" class="h-6 w-6" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<path
d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z">
</path>
<line x1="12" y1="9" x2="12" y2="13"></line>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
<div class="py-4">Limitations</div>
<button class="bg-gray-600 w-[13vw] text-sm hover:bg-gray-700 py-4 px-4 mx-4 my-2 rounded-md"> May
occasionally generate incorrect information</button>
<button class="bg-gray-600 w-[13vw] text-sm hover:bg-gray-700 py-4 px-4 mx-4 my-2 rounded-md">May
occasionally produce harmful instructions or biased content</button>
<button
class="bg-gray-600 w-[13vw] text-sm hover:bg-gray-700 py-4 px-4 mx-4 my-2 rounded-md">Limited
knowledge of world and events after 2021</button>
</div>
</div>
<div class="input w-full text-center my-24 flex items-center justify-center flex-col">
<div class="buttonsvg pl-16 w-[50vw] flex">
<input class="w-full p-4 bg-gray-600 rounded-md" placeholder="Send a Message" type="text"
name="text" id="questionInput">
<button id="sendButton" class="relative -left-20 pl-10">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 mr-1" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
</div>
<div class="text-xs py-2 pr-10 opacity-70">Free Research Preview. ChatGPT may produce inaccurate
information about people, places, or facts.<a class="underline"
href="https://help.openai.com/en/articles/6825453-chatgpt-release-notes"> ChatGPT Mar 23
Version</a></div>
</div>
</div>
<div class="right2 w-full flex flex-col items-center h-fit">
<div class="box1 m-auto py-7 flex justify-start w-[40vw] items-center space-x-6">
<img class="w-9"
src="https://chat.openai.com/_next/image?url=https%3A%2F%2Flh3.googleusercontent.com%2Fa%2FAGNmyxa_a9M6k_RYXQha8eMOIDL6EaNReM0_CDX3hBi2%3Ds96-c&w=96&q=75"
alt="">
<div id="question2">Loading...</div>
</div>
<div class="box2 bg-gray-600 py-7 flex justify-center w-full items-center">
<div class="box w-[40vw] flex justify-start space-x-6">
<img class="w-9 h-9" src="https://chat.openai.com/favicon.ico" alt="">
<div class="flex space-y-4 flex-col">
<div id="question1">Loading...</div>
<div id="solution">Loading...</div>
</div>
</div>
</div>
<div class="input pt-80 w-full text-center mt-52 flex items-center justify-center flex-col">
<div class="buttonsvg pl-16 w-[50vw] flex">
<input class="w-full p-4 bg-gray-600 rounded-md" placeholder="Send a Message" type="text"
name="text" id="">
<button class="relative -left-20 pl-10">
<svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24"
stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 mr-1" height="1em" width="1em"
xmlns="http://www.w3.org/2000/svg">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
</div>
<div class="text-xs py-2 pr-10 opacity-70">Free Research Preview. ChatGPT may produce inaccurate
information about people, places, or facts.<a class="underline"
href="https://help.openai.com/en/articles/6825453-chatgpt-release-notes"> ChatGPT Mar 23
Version</a></div>
</div>
</div>
</div>
<script src="/static/js/script.js"></script>
</body>
</html>