-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (155 loc) · 12.4 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
<!DOCTYPE html>
<html class="light" style="color-scheme: light;">
<head>
<title>ProxyGPT</title>
<link rel="icon" type="image/png" href="/icon.png">
<link rel="stylesheet" href="css/chatgpt_stylesheet.css" crossorigin="anonymous">
<link rel="stylesheet" href="css/custom.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<noscript>You need to enable JavaScript to use ProxyGPT.</noscript>
</head>
<body>
<div class="relative z-0 flex h-full w-full overflow-hidden">
<div class="flex-shrink-0 overflow-x-hidden bg-token-sidebar-surface-primary h-full w-1/5">
<div class="flex h-full min-h-0 flex-col">
<div class="flex h-full min-h-0 flex-col transition-opacity opacity-100">
<div class="scrollbar-trigger relative h-full w-full flex-1 items-start border-white/20">
<nav class="flex h-full w-full flex-col px-3 pb-2">
<div class="sticky left-0 right-0 top-0 z-20 pt-2">
<div class="pb-0.5 last:pb-0" tabindex="0">
<a id="newConversationButton"
class="group flex h-fit gap-2 rounded-lg bg-token-sidebar-surface-primary px-2 py-2 font-medium hover:bg-token-sidebar-surface-secondary cursor-pointer">
<div
class="grow overflow-hidden text-ellipsis whitespace-normal text-sm text-token-text-primary">
New chat</div>
</a>
</div>
</div>
<div class="flex-col flex-1 transition-opacity duration-500 -mr-2 pr-2 overflow-y-auto">
<div class="sticky left-0 right-0 top-0 z-20 pt-1"></div>
<div class="flex flex-col gap-2 pb-2 text-token-text-primary text-sm">
<ol id="chatHistory"></ol>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
<main class="relative h-full w-full flex-1 overflow-auto transition-width">
<div role="presentation" class="flex h-full flex-col">
<div class="flex-1 overflow-auto">
<div class="relative h-full">
<div class="flex flex-col pb-9 text-sm">
<div
class="sticky top-0 mb-1.5 flex justify-between z-10 h-fit p-2 font-semibold bg-token-main-surface-primary">
<div class="flex overflow-hidden gap-0">
<div
class="overflow-hidden hover:bg-token-main-surface-secondary flex flex-col w-full h-fit flex-grow relative dark:text-white rounded-lg bg-token-main-surface-primary">
<select id="chatbot"
class="m-0 w-fit cursor-pointer resize-none border-0 bg-transparent focus:ring-0 focus-visible:ring-0 dark:bg-transparent max-h-25 py-2 md:py-2 pr-8 md:pr-8 placeholder-black/50 dark:placeholder-white/50 pl-2 md:pl-3">
<option value="ChatGPT" selected="selected">ChatGPT</option>
<option value="Claude">Claude</option>
</select>
</div>
</div>
<div class="flex pt-1 text-center text-2xl">Welcome to ProxyGPT!</div>
<div class="flex invisible overflow-hidden gap-0">
<div
class="overflow-hidden hover:bg-token-main-surface-secondary flex flex-col w-full h-fit flex-grow relative dark:text-white rounded-lg bg-token-main-surface-primary">
<select disabled
class="m-0 w-fit cursor-pointer resize-none border-0 bg-transparent focus:ring-0 focus-visible:ring-0 dark:bg-transparent max-h-25 py-2 md:py-2 pr-8 md:pr-8 placeholder-black/50 dark:placeholder-white/50 pl-2 md:pl-3">
<option value="ChatGPT" selected="selected">ChatGPT</option>
<option value="Claude">Claude</option>
</select>
</div>
</div>
</div>
<div id="chatConversation"></div>
</div>
</div>
</div>
<div
class="w-full pt-2 md:pt-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:w-[calc(100%-.5rem)]">
<form id="chatForm"
class="stretch mx-2 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
<div class="relative flex h-full flex-1 items-stretch flex-col">
<label for="proxy">Proxy:
<span class="tooltip-container">🛈
<div class="tooltip">
<p>Statistics from last 7 days:</p>
<p>SLA: % of requests handled in <1 minute</p>
<p>MTTR: Mean time to response</p>
<p>Load: Daily average number of requests</p>
<p>Downvote: % of requests downvoted by other users</p>
</div>
</span>
<button id="refreshProxyBtn" type="button"
class="spin-animation stop-spin-animation rounded-lg text-token-text-secondary hover:bg-token-main-surface-secondary">
<span class="flex h-[30px] w-[30px] items-center justify-center"
title="Refresh proxy list">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"
viewBox="0 0 24 24" class="icon-md-heavy">
<path fill="black"
d="M3.07 10.876C3.623 6.436 7.41 3 12 3a9.15 9.15 0 0 1 6.012 2.254V4a1 1 0 1 1 2 0v4a1 1 0 0 1-1 1H15a1 1 0 1 1 0-2h1.957A7.15 7.15 0 0 0 12 5a7 7 0 0 0-6.946 6.124 1 1 0 1 1-1.984-.248m16.992 1.132a1 1 0 0 1 .868 1.116C20.377 17.564 16.59 21 12 21a9.15 9.15 0 0 1-6-2.244V20a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H7.043A7.15 7.15 0 0 0 12 19a7 7 0 0 0 6.946-6.124 1 1 0 0 1 1.116-.868">
</path>
</svg>
</span>
</button>
</label>
<div
class="overflow-hidden [&:has(textarea:focus)]:border-token-border-xheavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)] flex flex-col w-full dark:border-token-border-heavy flex-grow relative border border-token-border-heavy dark:text-white rounded-2xl bg-token-main-surface-primary">
<select required disabled name="proxy" id="proxy"
class="m-0 w-full resize-none border-0 bg-transparent focus:ring-0 focus-visible:ring-0 dark:bg-transparent max-h-25 py-[10px] pr-10 md:py-3.5 md:pr-12 placeholder-black/50 dark:placeholder-white/50 pl-3 md:pl-4">
</select>
</div>
<label for="payment" class="py-1">Payment:
<span class="tooltip-container">🛈
<div class="tooltip">
<p>You can obtain e-cash by volunteering to proxy!</p>
</div>
</span>
</label>
<div class="relative flex h-full flex-1 items-stretch md:flex-col">
<div class="flex w-full items-center">
<div
class="overflow-hidden [&:has(textarea:focus)]:border-token-border-xheavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)] flex flex-col w-full dark:border-token-border-heavy flex-grow relative border border-token-border-heavy dark:text-white rounded-2xl bg-token-main-surface-primary">
<textarea required id="payment" name="payment" rows="1" cols="50"
maxlength="512"
placeholder="Enter your e-cash here..."
class="text-input m-0 w-full resize-none border-0 bg-transparent focus:ring-0 focus-visible:ring-0 dark:bg-transparent max-h-25 py-[10px] pr-10 md:py-3.5 md:pr-12 placeholder-black/50 dark:placeholder-white/50 pl-3 md:pl-4"></textarea>
</div>
</div>
</div>
<label for="prompt" class="py-1">Prompt:</label>
<div class="relative flex h-full flex-1 items-stretch md:flex-col">
<div class="flex w-full items-center">
<div
class="overflow-hidden [&:has(textarea:focus)]:border-token-border-xheavy [&:has(textarea:focus)]:shadow-[0_2px_6px_rgba(0,0,0,.05)] flex flex-col w-full dark:border-token-border-heavy flex-grow relative border border-token-border-heavy dark:text-white rounded-2xl bg-token-main-surface-primary">
<textarea required id="prompt" name="prompt" rows="1" maxlength="2048"
placeholder="Enter your query here..."
class="text-input m-0 w-full resize-none border-0 bg-transparent focus:ring-0 focus-visible:ring-0 dark:bg-transparent max-h-25 py-[10px] pr-10 md:py-3.5 md:pr-12 placeholder-black/50 dark:placeholder-white/50 pl-3 md:pl-4"></textarea>
<button type="submit" id="submitButton" title="Submit your message"
class="absolute bottom-1.5 right-2 rounded-lg border border-black bg-black p-1 text-white transition-colors enabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:hover:bg-white md:bottom-3 md:right-3">
Send
</button>
</div>
</div>
</div>
</div>
</form>
<div class="relative px-2 py-2 text-center text-xs text-token-text-secondary md:px-[60px]">
<span>ProxyGPT is a research project and may provide incorrect information. Use with
caution.</span>
</div>
</div>
</div>
</main>
</div>
</div>
<script type="text/javascript" src="scripts/purify.min.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
</html>