Hugging Face's logo

Spaces:
d3f14nt
/
sf-4ae
Running

App Files Community
Rebel Artimus commited on
Commit
e91bc8e
·
1 Parent(s): 3aac7da

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +36 -19
  2. main.js +104 -0
index.html CHANGED
@@ -1,19 +1,36 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>chatGPT</title><body>
2
+ <div class="min-h-screen nav-user bg-gray-100 py-0 px-5">
3
+ <div class="max-w-5xl m-auto text-gray-800 h-4/6">
4
+ <div class="fixed -right-0 sm:right-0 sm:text-center">
5
+ App Name
6
+ </div>
7
+ <div class="-my-2 overflow-x-auto scroll-auto py-5">
8
+ <div class="inline-block align-middle w-full p-4 overflow-hidden lg:my-4 sm:lg:m-auto lg:my-5 lg:sm:m-auto">
9
+ <h1 class="text-2xl text-bold text-center">ChatGPT</h1>
10
+ <input type="text" class="border border-gray-400 rounded-full py-2 px-4 mt-2 mb-2" placeholder="Enter your input here" />
11
+ <div class="overflow-y-scroll pt-4 pb-20 h-full">
12
+ <ul>
13
+ <li>
14
+ <div class="flex justify-between p-2 py-3">
15
+ <span class="text-sm text-gray-800">OpenAI API Key:</span>
16
+ <input type="text" class="border border-gray-400 rounded-full py-2 px-1"/>
17
+ </div>
18
+ </li>
19
+ <li>
20
+ <div class="flex justify-between p-2 py-3">
21
+ <span class="text-sm text-gray-800">OpenAI Model:</span>
22
+ <select class="border border-gray-400 rounded-full py-2 px-1">
23
+ <option>davinci</option>
24
+ <option>explorer</option>
25
+ <option>curie</option>
26
+ </select>
27
+ </div>
28
+ </li>
29
+ </ul>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </div>
35
+ </body>
36
+ </html>
main.js ADDED
@@ -0,0 +1,104 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class App{
2
+ constructor() {
3
+ this.apiKey = null;
4
+ this.model = null;
5
+ this.inputs = {
6
+ text: "",
7
+ apiKeyInput: "",
8
+ modelInput: ""
9
+ };
10
+ this.states = {
11
+ input: 0,
12
+ apiKey: 1,
13
+ model: 2
14
+ };
15
+ this.state = this.states.input;
16
+ }
17
+
18
+ handleKeyPress = (e) => {
19
+ if (e.keyCode === 13) {
20
+ if (this.state === this.states.input) {
21
+ this.setState(this.states.apiKey);
22
+ } else if (this.state === this.states.apiKey) {
23
+ this.setState(this.states.model);
24
+ } else if (this.state === this.states.model) {
25
+ this.setState(this.states.input);
26
+ }
27
+ }
28
+ }
29
+
30
+ handleInputChange = (e) => {
31
+ const inputValue = e.target.value;
32
+ if (this.state === this.states.input) {
33
+ this.inputs.text = inputValue;
34
+ } else if (this.state === this.states.apiKey) {
35
+ this.inputs.apiKeyInput = inputValue;
36
+ } else if (this.state === this.states.model) {
37
+ this.inputs.modelInput = inputValue;
38
+ }
39
+ }
40
+
41
+ setState = (newState) => {
42
+ console.log("setState", newState);
43
+ if (newState === this.states.input) {
44
+ this.inputs.apiKey = this.inputs.apiKeyInput;
45
+ this.inputs.model = this.inputs.modelInput;
46
+ }
47
+ this.state = newState;
48
+ }
49
+
50
+ render() {
51
+ return (
52
+ <div className="prose">
53
+ <div className="mx-16 mb-10">
54
+ <h1>ChatGPT</h1>
55
+ <p>ChatGPT is a simple chat interface that uses the OpenAI API to generate responses based on the user's input. You can use this app to test your OpenAI API keys and models, or just to have a fun conversation with a chatbot!</p>
56
+ <div className="flex justify-center mt-16">
57
+ <input
58
+ type="text"
59
+ value={this.inputs.text}
60
+ onKeyPress={(e) => this.handleKeyPress(e)}
61
+ onChange={(e) => this.handleInputChange(e)}
62
+ className="w-full round"
63
+ autoFocus
64
+ x-data={{ input: this.inputs.text }}
65
+ x-cloak
66
+ x-show={state}
67
+ />
68
+ <button className="m-2 py-2 px-4 text-white bg-blue-600">Send</button>
69
+ </div>
70
+ <div className="flex justify-center mt-8">
71
+ {this.state === this.states.input ? (
72
+ <div className="m-2 p-2 rounded text-gray-800">
73
+ <label className="text-sm text-black">OpenAI API Key:</label>
74
+ <input
75
+ type="text"
76
+ value={this.inputs.apiKeyInput}
77
+ onKeyPress={(e) => this.handleKeyPress(e)}
78
+ onChange={(e) => this.handleInputChange(e)}
79
+ className="border border-gray-400 rounded w-full p-2"
80
+ />
81
+ </div>
82
+ ) : null}
83
+ {this.state === this.states.apiKey ? (
84
+ <div className="m-2 p-2 rounded text-gray-800">
85
+ <label className="text-sm text-black">OpenAI Model:</label>
86
+ <select
87
+ value={this.inputs.modelInput}
88
+ onChange={(e) => this.handleInputChange(e)}
89
+ className="border border-gray-400 rounded w-full p-2"
90
+ >
91
+ <option value="davinci">Davinci</option>
92
+ <option value="explorer">Explorer</option>
93
+ <option value="curie">Curie</option>
94
+ </select>
95
+ </div>
96
+ ) : null}
97
+ </div>
98
+ </div>
99
+ </div>
100
+ );
101
+ }
102
+ }
103
+
104
+ export default App;