Hugging Face's logo

Spaces:
Trudy
/
gemini-image-to-code
Running

App Files Community
Trudy commited on
Commit
a6cd979
·
1 Parent(s): 332ddf6

scrolling bug maybe from margin/padding top?

Browse files
Files changed (2) hide show
  1. components/Header.js +1 -1
  2. pages/index.js +143 -145
components/Header.js CHANGED
@@ -3,7 +3,7 @@ import { Github, Info } from 'lucide-react';
3
 
4
  const Header = () => {
5
  return (
6
- <div className="fixed top-0 left-0 right-0 w-full bg-white p-4 z-50">
7
  <div className="w-full flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0">
8
  <div className="flex items-center gap-2 text-base">
9
  <span className="text-black font-bold text-lg">Image to Code</span>
 
3
 
4
  const Header = () => {
5
  return (
6
+ <div className="sticky top-0 w-full bg-white p-4 z-50 ">
7
  <div className="w-full flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0">
8
  <div className="flex items-center gap-2 text-base">
9
  <span className="text-black font-bold text-lg">Image to Code</span>
pages/index.js CHANGED
@@ -290,171 +290,169 @@ export default function Home() {
290
  <>
291
  <Head>
292
  <title>Image to Code</title>
293
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
294
  </Head>
295
- <div className="relative min-h-screen bg-white tracking-[-0.005em]">
296
  <Header />
297
  <ErrorModal
298
  isOpen={showErrorModal}
299
  onClose={() => setShowErrorModal(false)}
300
  />
301
 
302
- <main className="relative w-full h-full min-h-screen overflow-y-auto -webkit-overflow-scrolling-touch">
303
- <div className="w-full pt-24 sm:pt-16">
304
- <div className={`flex flex-col md:flex-row gap-4 max-w-6xl mx-auto pb-20 transition-all duration-500 ${!hasStartedGenerating ? 'justify-center' : ''}`}>
305
- <div className={`w-full md:flex-1 py-4 md:py-20 px-3 transition-all duration-500 ${!hasStartedGenerating ? 'md:max-w-2xl mx-auto' : ''}`}>
306
- <section className="flex flex-col bg-gray-100 rounded-2xl p-4">
307
- <div
308
- {...getRootProps()}
309
- className={`border-2 border-dashed bg-gray-100 rounded-2xl m-4 min-h-96 h-fit flex
310
- flex-col items-center justify-center cursor-pointer hover:border-gray-400 transition-colors ${imageBase64 ? 'border-none' : 'border-gray-300'}`}
311
- >
312
- <input {...getInputProps()} />
313
- {imageBase64 ? (
314
- <img
315
- src={imageBase64}
316
- alt="Uploaded"
317
- className="max-h-full max-w-full object-contain rounded-2xl"
318
- />
319
- ) : (
320
- <>
321
- <Upload className="w-12 h-12 text-gray-400 mb-4" />
322
- <p className="text-gray-400 text-center px-4">
323
- {isDragActive
324
- ? "Drop the image here"
325
- : "Drag & drop an image here, or click to select one"}
326
- </p>
327
- </>
328
- )}
329
- </div>
330
- <div className="max-w-full mb-4">
331
- <div className="flex overflow-x-auto gap-2 py-1 mx-4">
332
- {SAMPLE_IMAGES.map((image) => (
333
- <button
334
- key={image}
335
- type="button"
336
- onClick={() => handleSampleSelect(image)}
337
- className={`flex-shrink-0 w-14 h-14 bg-white rounded-lg hover:scale-110 transition-all ${selectedSample === image ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-300'
338
- }`}
339
- >
340
- <img
341
- src={`/samples/${image}`}
342
- alt={image}
343
- className="w-full h-full object-cover rounded-lg"
344
- />
345
- </button>
346
- ))}
347
- </div>
348
- </div>
349
- </section>
350
- <section className="mt-4 space-y-4 bg-gray-100 rounded-2xl p-4">
351
- <div>
352
- <button
353
- type="button"
354
- onClick={() => setShowSamples(!showSamples)}
355
- className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
356
- >
357
- {/* <Settings size={16} /> */}
358
- <span className="font-bold">Advanced</span>
359
- <ChevronDown
360
- size={16}
361
- className={`transform transition-transform ${showSamples ? 'rotate-180' : ''
362
  }`}
363
- />
364
- </button>
365
-
366
- {showSamples && (
367
- <div className="my-2 rounded-lg">
368
- <div className="space-y-2">
369
- <div className="flex items-center justify-between">
370
- <div className="flex items-center gap-2">
371
- <Layers size={14} className="text-gray-600" />
372
- <label htmlFor="concurrent-requests" className="text-sm font-medium text-gray-700">
373
- Concurrent Requests: {concurrentRequests}
374
- </label>
375
- </div>
376
- <input
377
- id="concurrent-requests"
378
- type="range"
379
- min="1"
380
- max="10"
381
- value={concurrentRequests}
382
- onChange={(e) => setConcurrentRequests(Number(e.target.value))}
383
- className="w-1/2"
384
- />
385
- </div>
386
-
387
- <button
388
- type="button"
389
- onClick={() => setShowPrompt(!showPrompt)}
390
- className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
391
- >
392
- <Pen size={14} />
393
- <span>Edit System Prompt</span>
394
- <ChevronDown
395
- size={16}
396
- className={`transform transition-transform ${showPrompt ? 'rotate-180' : ''}`}
397
- />
398
- </button>
399
-
400
- {showPrompt && (
401
- <textarea
402
- value={prompt}
403
- onChange={(e) => setPrompt(e.target.value)}
404
- className="w-full h-64 p-2 border rounded-lg font-mono text-sm mt-2 bg-white text-gray-900"
405
- placeholder="Enter your prompt here..."
406
- />
407
- )}
408
- </div>
409
- </div>
410
- )}
411
  </div>
412
-
413
- </section>
414
- <section className="mt-4">
 
415
  <button
416
  type="button"
417
- onClick={generateCode}
418
- className="px-4 py-4 bg-gray-800 text-white rounded-2xl mb-8
419
- hover:bg-gray-900 transition-colors w-full disabled:bg-gray-300 disabled:cursor-not-allowed
420
- flex items-center justify-center gap-2 font-bold"
421
- disabled={!imageBase64 || loading}
422
  >
423
- {/* <Send size={16} className={loading ? 'opacity-50' : ''} /> */}
424
- <span>{loading ? "Generating..." : `Generate ${concurrentRequests} Code Snippet${concurrentRequests > 1 ? 's' : ''}`}</span>
425
-
 
 
 
 
426
  </button>
427
- </section>
428
- </div>
429
 
430
- {hasStartedGenerating && (
431
- <div className="w-full md:flex-1 py-4 md:py-20 px-3 animate-slide-in">
432
- {loading ? (
433
- // Loading skeletons for code previews
434
- Array(concurrentRequests).fill().map((_, index) => (
435
- <div key={`skeleton-preview-${Date.now()}-${index}`} className="mb-4 p-6 rounded-3xl bg-gray-100 animate-pulse">
436
- <div className="w-full h-[500px] bg-gray-200 rounded-lg mb-4" />
437
- <div className="flex justify-between items-center">
438
- <div className="h-10 w-32 bg-gray-200 rounded-full" />
439
- <div className="h-10 w-24 bg-gray-200 rounded-full" />
 
 
 
 
 
 
 
 
 
440
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
441
  </div>
442
- ))
443
- ) : (
444
- outputs.map((output) => (
445
- <CodePreview
446
- key={output.id}
447
- output={output}
448
- onCodeChange={handleCodeChange}
449
- fullResponse={output.fullResponse}
450
- />
451
- ))
452
  )}
453
  </div>
454
- )}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
455
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
456
  </div>
457
- </main>
458
  </div>
459
  </>
460
  );
 
290
  <>
291
  <Head>
292
  <title>Image to Code</title>
293
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
294
  </Head>
295
+ <div className="bg-white">
296
  <Header />
297
  <ErrorModal
298
  isOpen={showErrorModal}
299
  onClose={() => setShowErrorModal(false)}
300
  />
301
 
302
+ <div className="w-full">
303
+ <div className={`flex flex-col md:flex-row gap-4 max-w-6xl mx-auto pb-20 ${!hasStartedGenerating ? 'justify-center' : ''}`}>
304
+ <div className={`w-full md:flex-1 py-4 px-3 ${!hasStartedGenerating ? 'md:max-w-2xl mx-auto' : ''}`}>
305
+ <section className="flex flex-col bg-gray-100 rounded-2xl p-4">
306
+ <div
307
+ {...getRootProps()}
308
+ className={`border-2 border-dashed bg-gray-100 rounded-2xl m-4 min-h-96 h-fit flex
309
+ flex-col items-center justify-center cursor-pointer hover:border-gray-400 transition-colors ${imageBase64 ? 'border-none' : 'border-gray-300'}`}
310
+ >
311
+ <input {...getInputProps()} />
312
+ {imageBase64 ? (
313
+ <img
314
+ src={imageBase64}
315
+ alt="Uploaded"
316
+ className="max-h-full max-w-full object-contain rounded-2xl"
317
+ />
318
+ ) : (
319
+ <>
320
+ <Upload className="w-12 h-12 text-gray-400 mb-4" />
321
+ <p className="text-gray-400 text-center px-4">
322
+ {isDragActive
323
+ ? "Drop the image here"
324
+ : "Drag & drop an image here, or click to select one"}
325
+ </p>
326
+ </>
327
+ )}
328
+ </div>
329
+ <div className="max-w-full mb-4">
330
+ <div className="flex overflow-x-auto gap-2 py-1 mx-4">
331
+ {SAMPLE_IMAGES.map((image) => (
332
+ <button
333
+ key={image}
334
+ type="button"
335
+ onClick={() => handleSampleSelect(image)}
336
+ className={`flex-shrink-0 w-14 h-14 bg-white rounded-lg hover:scale-110 transition-all ${selectedSample === image ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-300'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
337
  }`}
338
+ >
339
+ <img
340
+ src={`/samples/${image}`}
341
+ alt={image}
342
+ className="w-full h-full object-cover rounded-lg"
343
+ />
344
+ </button>
345
+ ))}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
346
  </div>
347
+ </div>
348
+ </section>
349
+ <section className="mt-4 space-y-4 bg-gray-100 rounded-2xl p-4">
350
+ <div>
351
  <button
352
  type="button"
353
+ onClick={() => setShowSamples(!showSamples)}
354
+ className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
 
 
 
355
  >
356
+ {/* <Settings size={16} /> */}
357
+ <span className="font-bold">Advanced</span>
358
+ <ChevronDown
359
+ size={16}
360
+ className={`transform transition-transform ${showSamples ? 'rotate-180' : ''
361
+ }`}
362
+ />
363
  </button>
 
 
364
 
365
+ {showSamples && (
366
+ <div className="my-2 rounded-lg">
367
+ <div className="space-y-2">
368
+ <div className="flex items-center justify-between">
369
+ <div className="flex items-center gap-2">
370
+ <Layers size={14} className="text-gray-600" />
371
+ <label htmlFor="concurrent-requests" className="text-sm font-medium text-gray-700">
372
+ Concurrent Requests: {concurrentRequests}
373
+ </label>
374
+ </div>
375
+ <input
376
+ id="concurrent-requests"
377
+ type="range"
378
+ min="1"
379
+ max="10"
380
+ value={concurrentRequests}
381
+ onChange={(e) => setConcurrentRequests(Number(e.target.value))}
382
+ className="w-1/2"
383
+ />
384
  </div>
385
+
386
+ <button
387
+ type="button"
388
+ onClick={() => setShowPrompt(!showPrompt)}
389
+ className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
390
+ >
391
+ <Pen size={14} />
392
+ <span>Edit System Prompt</span>
393
+ <ChevronDown
394
+ size={16}
395
+ className={`transform transition-transform ${showPrompt ? 'rotate-180' : ''}`}
396
+ />
397
+ </button>
398
+
399
+ {showPrompt && (
400
+ <textarea
401
+ value={prompt}
402
+ onChange={(e) => setPrompt(e.target.value)}
403
+ className="w-full h-64 p-2 border rounded-lg font-mono text-sm mt-2 bg-white text-gray-900"
404
+ placeholder="Enter your prompt here..."
405
+ />
406
+ )}
407
  </div>
408
+ </div>
 
 
 
 
 
 
 
 
 
409
  )}
410
  </div>
411
+
412
+ </section>
413
+ <section className="mt-4">
414
+ <button
415
+ type="button"
416
+ onClick={generateCode}
417
+ className="px-4 py-4 bg-gray-800 text-white rounded-2xl mb-8
418
+ hover:bg-gray-900 transition-colors w-full disabled:bg-gray-300 disabled:cursor-not-allowed
419
+ flex items-center justify-center gap-2 font-bold"
420
+ disabled={!imageBase64 || loading}
421
+ >
422
+ {/* <Send size={16} className={loading ? 'opacity-50' : ''} /> */}
423
+ <span>{loading ? "Generating..." : `Generate ${concurrentRequests} Code Snippet${concurrentRequests > 1 ? 's' : ''}`}</span>
424
+
425
+ </button>
426
+ </section>
427
  </div>
428
+
429
+ {hasStartedGenerating && (
430
+ <div className="w-full md:flex-1 py-4 md:py-20 px-3 animate-slide-in">
431
+ {loading ? (
432
+ // Loading skeletons for code previews
433
+ Array(concurrentRequests).fill().map((_, index) => (
434
+ <div key={`skeleton-preview-${Date.now()}-${index}`} className="mb-4 p-6 rounded-3xl bg-gray-100 animate-pulse">
435
+ <div className="w-full h-[500px] bg-gray-200 rounded-lg mb-4" />
436
+ <div className="flex justify-between items-center">
437
+ <div className="h-10 w-32 bg-gray-200 rounded-full" />
438
+ <div className="h-10 w-24 bg-gray-200 rounded-full" />
439
+ </div>
440
+ </div>
441
+ ))
442
+ ) : (
443
+ outputs.map((output) => (
444
+ <CodePreview
445
+ key={output.id}
446
+ output={output}
447
+ onCodeChange={handleCodeChange}
448
+ fullResponse={output.fullResponse}
449
+ />
450
+ ))
451
+ )}
452
+ </div>
453
+ )}
454
  </div>
455
+ </div>
456
  </div>
457
  </>
458
  );