Hugging Face's logo

Spaces:
reruntech
/
half-drop-demo
Running

App Files Community
Sean Powell commited on
Commit
cb1edc7
·
1 Parent(s): 8df445a

Improve test tool. Make deployable to a hf space.

Browse files
Files changed (3) hide show
  1. index.html +168 -0
  2. pipeline.png +0 -0
  3. tools/half-drop.html +0 -92
index.html ADDED
@@ -0,0 +1,168 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>React API Request Form</title>
5
+ <script src="https://cdn.tailwindcss.com"></script>
6
+ <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
7
+ <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
8
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
9
+ </head>
10
+ <body>
11
+ <div id="app"></div>
12
+ <script type="text/babel">
13
+ function App() {
14
+ const [apiEndpoint, setApiEndpoint] = React.useState('https://cvs65it9x6ibiiep.us-east-1.aws.endpoints.huggingface.cloud');
15
+ const [huggingFaceToken, setHuggingFaceToken] = React.useState('');
16
+ const [prompt, setPrompt] = React.useState('');
17
+ const [desiredOutputWidth, setDesiredOutputWidth] = React.useState('512');
18
+ const [text2ImgInferenceSteps, setText2ImgInferenceSteps] = React.useState('50');
19
+ const [img2imgInferenceSteps, setImg2imgInferenceSteps] = React.useState('50');
20
+ const [Text2ImgGuidanceScale, setText2ImgGuidanceScale] = React.useState('7.14');
21
+ const [img2ImgStrength, setImg2ImgStrength] = React.useState('0.6');
22
+ const [error, setError] = React.useState('');
23
+ const [loading, setLoading] = React.useState(false);
24
+ const [imageSrc, setImageSrc] = React.useState(null);
25
+ const [loadingText, setLoadingText] = React.useState("Loading");
26
+ React.useEffect(() => {
27
+ let interval;
28
+
29
+ if (loading) {
30
+ interval = setInterval(() => {
31
+ setLoadingText(prev => prev.length < 10 ? prev + "." : "Loading");
32
+ }, 500); // Update every 500 milliseconds
33
+ }
34
+
35
+ return () => clearInterval(interval);
36
+ }, [loading]);
37
+
38
+ const sendRequest = (event) => {
39
+ event.preventDefault();
40
+ setError('');
41
+ setLoading(true);
42
+
43
+ fetch(apiEndpoint, {
44
+ method: 'POST',
45
+ headers: {
46
+ 'Content-Type': 'application/json',
47
+ Authorization: `Bearer ${huggingFaceToken}`
48
+ },
49
+ body: JSON.stringify({
50
+ inputs: prompt,
51
+ desired_output_width: desiredOutputWidth,
52
+ text2img_inference_steps: text2ImgInferenceSteps,
53
+ img2img_inference_steps: img2imgInferenceSteps,
54
+ text2img_guidance_scale: Text2ImgGuidanceScale,
55
+ img2img_strength: img2ImgStrength
56
+ })
57
+ })
58
+ .then(response => response.json())
59
+ .then(data => {
60
+ if (data.error) {
61
+ setError(data.error)
62
+ } else {
63
+ setImageSrc('data:image/jpeg;base64,' + data.image);
64
+ }
65
+ })
66
+ .catch(error => {
67
+ console.error('Error:', error);
68
+ }).finally(() => {
69
+ setLoading(false);
70
+ });
71
+ };
72
+
73
+ return (
74
+ <div className="grid grid-cols-2 h-screen">
75
+ <form onSubmit={sendRequest} className="grid cols-1 max-w-6xl bg-gray-100 h-full p-10 overflow-scroll">
76
+ <img src="./pipeline.png"/>
77
+ {error ? <div className="bg-red-200 py-2 px-3 rounded-md mb-4">
78
+ <strong className="text-bold">Error: </strong>
79
+ {error}
80
+ </div> : null}
81
+ <label className="block text-sm font-medium text-gray-700 cols-1">Inference Endpoint URL:</label>
82
+ <input
83
+ type="text"
84
+ value={apiEndpoint}
85
+ onChange={(e) => setApiEndpoint(e.target.value)}
86
+ className="mb-6 p-2 border border-gray-300 rounded"
87
+ />
88
+ <label className="block text-sm font-medium text-gray-700 cols-1">Hugging Face Token:</label>
89
+ <p className="text-xs">Without "Bearer " prefix, e.g.
90
+ "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":</p>
91
+ <input
92
+ type="text"
93
+ value={huggingFaceToken}
94
+ onChange={(e) => setHuggingFaceToken(e.target.value)}
95
+ className="mb-6 p-2 border border-gray-300 rounded"
96
+ />
97
+ <label className="block text-sm font-medium text-gray-700">Prompt:</label>
98
+ <input
99
+ type="text"
100
+ value={prompt}
101
+ onChange={(e) => setPrompt(e.target.value)}
102
+ className="mb-6 p-2 border border-gray-300 rounded"
103
+ />
104
+ <label className="block text-sm font-medium text-gray-700">Desired Output Width:</label>
105
+ <p className="text-xs">The desired width of the final half-drop. Because of rounding during the
106
+ process,
107
+ the generator will try to as close to this as possible.</p>
108
+ <input
109
+ type="number"
110
+ value={desiredOutputWidth}
111
+ onChange={(e) => setDesiredOutputWidth(e.target.value)}
112
+ className="mb-6 p-2 border border-gray-300 rounded"
113
+ />
114
+ <label className="block text-sm font-medium text-gray-700">Text2Img Inference Steps:</label>
115
+ <p className="text-xs">The number of steps to take when generating the original image.</p>
116
+ <input
117
+ type="number"
118
+ value={text2ImgInferenceSteps}
119
+ onChange={(e) => setText2ImgInferenceSteps(e.target.value)}
120
+ className="mb-6 p-2 border border-gray-300 rounded"
121
+ />
122
+ <label className="block text-sm font-medium text-gray-700">Img2Img Inference Steps:</label>
123
+ <p className="text-xs">The number of steps to take when converting the extracted diamond into a
124
+ tile.</p>
125
+ <input
126
+ type="number"
127
+ value={img2imgInferenceSteps}
128
+ onChange={(e) => setImg2imgInferenceSteps(e.target.value)}
129
+ className="mb-6 p-2 border border-gray-300 rounded"
130
+ />
131
+ <label className="block text-sm font-medium text-gray-700">Text2Img Guidance Scale:</label>
132
+ <p className="text-xs">Guidance scale for the original image generation. The pipeline default is
133
+ 5.</p>
134
+ <input
135
+ type="number"
136
+ value={Text2ImgGuidanceScale}
137
+ onChange={(e) => setText2ImgGuidanceScale(e.target.value)}
138
+ className="mb-6 p-2 border border-gray-300 rounded"
139
+ />
140
+ <label className="block text-sm font-medium text-gray-700">Img2Img Strength:</label>
141
+ <p className="text-xs">Strength to use when converting the diamond into a repeatable tile, i.e. how
142
+ much
143
+ it can vary from the original generation. Pipeline default is</p>
144
+ <input
145
+ type="number"
146
+ value={img2ImgStrength}
147
+ onChange={(e) => setImg2ImgStrength(e.target.value)}
148
+ className="mb-6 p-2 border border-gray-300 rounded"
149
+ />
150
+
151
+ <input
152
+ type="submit"
153
+ value="Send"
154
+ className="mt-2 p-2 bg-blue-500 text-white rounded hover:bg-blue-700"
155
+ />
156
+ </form>
157
+ <div className="p-10 overflow-scroll">
158
+ {loading && <p className="my-4">{loadingText}</p>}
159
+ {imageSrc && <img src={imageSrc} alt="Response" className="mt-10"/>}
160
+ </div>
161
+ </div>
162
+ );
163
+ }
164
+
165
+ ReactDOM.render(<App/>, document.getElementById('app'));
166
+ </script>
167
+ </body>
168
+ </html>
pipeline.png ADDED
tools/half-drop.html DELETED
@@ -1,92 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>React API Request Form</title>
5
- <script src="https://cdn.tailwindcss.com"></script>
6
- <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
7
- <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
8
- <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
9
- </head>
10
- <body>
11
- <div id="app"></div>
12
- <script type="text/babel">
13
- function App() {
14
- const [apiEndpoint, setApiEndpoint] = React.useState('');
15
- const [huggingFaceToken, setHuggingFaceToken] = React.useState('');
16
- const [prompt, setPrompt] = React.useState('');
17
- const [error, setError] = React.useState('');
18
- const [loading, setLoading] = React.useState(false);
19
- const [imageSrc, setImageSrc] = React.useState(null);
20
-
21
- const sendRequest = (event) => {
22
- event.preventDefault();
23
- setError('');
24
- setLoading(true);
25
-
26
- fetch(apiEndpoint, {
27
- method: 'POST',
28
- headers: {
29
- 'Content-Type': 'application/json',
30
- Authorization: `Bearer ${huggingFaceToken}`
31
- // Include other headers if required
32
- },
33
- body: JSON.stringify({inputs: prompt})
34
- })
35
- .then(response => response.json())
36
- .then(data => {
37
- if (data.error) {
38
- setError(data.error)
39
- } else {
40
- setImageSrc('data:image/jpeg;base64,' + data.image);
41
- }
42
- })
43
- .catch(error => {
44
- console.error('Error:', error);
45
- }).finally(() => {
46
- setLoading(false);
47
- });
48
- };
49
-
50
- return (
51
- <form onSubmit={sendRequest} className="m-10 grid cols-1 max-w-6xl">
52
- {error ? <div className="bg-red-200 py-2 px-3 rounded-md mb-4">
53
- <strong className="text-bold">Error: </strong>
54
- {error}
55
- </div> : null}
56
- <label className="block text-sm font-medium text-gray-700 cols-1">Inference Endpoint URL:</label>
57
- <input
58
- type="text"
59
- value={apiEndpoint}
60
- onChange={(e) => setApiEndpoint(e.target.value)}
61
- className="mt-2 mb-2 p-2 border border-gray-300 rounded"
62
- />
63
- <label className="block text-sm font-medium text-gray-700 cols-1">Hugging Face Token:</label>
64
- <input
65
- type="text"
66
- value={huggingFaceToken}
67
- onChange={(e) => setHuggingFaceToken(e.target.value)}
68
- className="mt-2 mb-2 p-2 border border-gray-300 rounded"
69
- />
70
- <label className="block text-sm font-medium text-gray-700">Prompt:</label>
71
- <input
72
- type="text"
73
- value={prompt}
74
- onChange={(e) => setPrompt(e.target.value)}
75
- className="mt-2 mb-2 p-2 border border-gray-300 rounded"
76
- />
77
-
78
- <input
79
- type="submit"
80
- value="Send"
81
- className="mt-2 p-2 bg-blue-500 text-white rounded hover:bg-blue-700"
82
- />
83
- {loading && <p className="my-4">Loading...</p>}
84
- {imageSrc && <img src={imageSrc} alt="Response" className="mt-10"/>}
85
- </form>
86
- );
87
- }
88
-
89
- ReactDOM.render(<App/>, document.getElementById('app'));
90
- </script>
91
- </body>
92
- </html>