Hugging Face's logo

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

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

trying to overrride the scrolling for mobile bug

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