gemini-image-to-code

Running

App Files Files Community

Trudy commited on Jan 23

Commit

a6cd979

1 Parent(s): 332ddf6

scrolling bug maybe from margin/padding top?

Browse files

Files changed (2) hide show

components/Header.js +1 -1
pages/index.js +143 -145

components/Header.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { Github, Info } from 'lucide-react';
 const Header = () => {
   return (
-    <div className="fixed top-0 left-0 right-0 w-full bg-white p-4 z-50">
       <div className="w-full flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0">
         <div className="flex items-center gap-2 text-base">
           <span className="text-black font-bold text-lg">Image to Code</span>

 const Header = () => {
   return (
+    <div className="sticky top-0 w-full bg-white p-4 z-50 ">
       <div className="w-full flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 sm:gap-0">
         <div className="flex items-center gap-2 text-base">
           <span className="text-black font-bold text-lg">Image to Code</span>

pages/index.js CHANGED Viewed

@@ -290,171 +290,169 @@ export default function Home() {
     <>
       <Head>
         <title>Image to Code</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
       </Head>
-      <div className="relative min-h-screen bg-white tracking-[-0.005em]">
         <Header />
         <ErrorModal
           isOpen={showErrorModal}
           onClose={() => setShowErrorModal(false)}
         />
-        <main className="relative w-full h-full min-h-screen overflow-y-auto -webkit-overflow-scrolling-touch">
-          <div className="w-full pt-24 sm:pt-16">
-            <div className={`flex flex-col md:flex-row gap-4 max-w-6xl mx-auto pb-20 transition-all duration-500 ${!hasStartedGenerating ? 'justify-center' : ''}`}>
-              <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' : ''}`}>
-                <section className="flex flex-col bg-gray-100 rounded-2xl p-4">
-                  <div
-                    {...getRootProps()}
-                    className={`border-2 border-dashed bg-gray-100 rounded-2xl m-4 min-h-96 h-fit flex
-                  flex-col items-center justify-center cursor-pointer hover:border-gray-400 transition-colors ${imageBase64 ? 'border-none' : 'border-gray-300'}`}
-                  >
-                    <input {...getInputProps()} />
-                    {imageBase64 ? (
-                      <img
-                        src={imageBase64}
-                        alt="Uploaded"
-                        className="max-h-full max-w-full object-contain rounded-2xl"
-                      />
-                    ) : (
-                      <>
-                        <Upload className="w-12 h-12 text-gray-400 mb-4" />
-                        <p className="text-gray-400 text-center px-4">
-                          {isDragActive
-                            ? "Drop the image here"
-                            : "Drag & drop an image here, or click to select one"}
-                        </p>
-                      </>
-                    )}
-                  </div>
-                  <div className="max-w-full mb-4">
-                    <div className="flex overflow-x-auto gap-2 py-1 mx-4">
-                      {SAMPLE_IMAGES.map((image) => (
-                        <button
-                          key={image}
-                          type="button"
-                          onClick={() => handleSampleSelect(image)}
-                          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'
-                            }`}
-                        >
-                          <img
-                            src={`/samples/${image}`}
-                            alt={image}
-                            className="w-full h-full object-cover rounded-lg"
-                          />
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-                </section>
-                <section className="mt-4 space-y-4 bg-gray-100 rounded-2xl p-4">
-                  <div>
-                    <button
-                      type="button"
-                      onClick={() => setShowSamples(!showSamples)}
-                      className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
-                    >
-                      {/* <Settings size={16} /> */}
-                      <span className="font-bold">Advanced</span>
-                      <ChevronDown
-                        size={16}
-                        className={`transform transition-transform ${showSamples ? 'rotate-180' : ''
                           }`}
-                      />
-                    </button>
-                    {showSamples && (
-                      <div className="my-2 rounded-lg">
-                        <div className="space-y-2">
-                          <div className="flex items-center justify-between">
-                            <div className="flex items-center gap-2">
-                              <Layers size={14} className="text-gray-600" />
-                              <label htmlFor="concurrent-requests" className="text-sm font-medium text-gray-700">
-                                Concurrent Requests: {concurrentRequests}
-                              </label>
-                            </div>
-                            <input
-                              id="concurrent-requests"
-                              type="range"
-                              min="1"
-                              max="10"
-                              value={concurrentRequests}
-                              onChange={(e) => setConcurrentRequests(Number(e.target.value))}
-                              className="w-1/2"
-                            />
-                          </div>
-                          <button
-                            type="button"
-                            onClick={() => setShowPrompt(!showPrompt)}
-                            className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
-                          >
-                            <Pen size={14} />
-                            <span>Edit System Prompt</span>
-                            <ChevronDown
-                              size={16}
-                              className={`transform transition-transform ${showPrompt ? 'rotate-180' : ''}`}
-                            />
-                          </button>
-                          {showPrompt && (
-                            <textarea
-                              value={prompt}
-                              onChange={(e) => setPrompt(e.target.value)}
-                              className="w-full h-64 p-2 border rounded-lg font-mono text-sm mt-2 bg-white text-gray-900"
-                              placeholder="Enter your prompt here..."
-                            />
-                          )}
-                        </div>
-                      </div>
-                    )}
                   </div>
-                </section>
-                <section className="mt-4">
                   <button
                     type="button"
-                    onClick={generateCode}
-                    className="px-4 py-4 bg-gray-800 text-white rounded-2xl mb-8
-                    hover:bg-gray-900  transition-colors w-full disabled:bg-gray-300 disabled:cursor-not-allowed
-                    flex items-center justify-center gap-2 font-bold"
-                    disabled={!imageBase64 || loading}
                   >
-                    {/* <Send size={16} className={loading ? 'opacity-50' : ''} /> */}
-                    <span>{loading ? "Generating..." : `Generate ${concurrentRequests} Code Snippet${concurrentRequests > 1 ? 's' : ''}`}</span>
                   </button>
-                </section>
-              </div>
-              {hasStartedGenerating && (
-                <div className="w-full md:flex-1 py-4 md:py-20 px-3 animate-slide-in">
-                  {loading ? (
-                    // Loading skeletons for code previews
-                    Array(concurrentRequests).fill().map((_, index) => (
-                      <div key={`skeleton-preview-${Date.now()}-${index}`} className="mb-4 p-6 rounded-3xl bg-gray-100 animate-pulse">
-                        <div className="w-full h-[500px] bg-gray-200 rounded-lg mb-4" />
-                        <div className="flex justify-between items-center">
-                          <div className="h-10 w-32 bg-gray-200 rounded-full" />
-                          <div className="h-10 w-24 bg-gray-200 rounded-full" />
                         </div>
                       </div>
-                    ))
-                  ) : (
-                    outputs.map((output) => (
-                      <CodePreview
-                        key={output.id}
-                        output={output}
-                        onCodeChange={handleCodeChange}
-                        fullResponse={output.fullResponse}
-                      />
-                    ))
                   )}
                 </div>
-              )}
             </div>
           </div>
-        </main>
       </div>
     </>
   );

     <>
       <Head>
         <title>Image to Code</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
       </Head>
+      <div className="bg-white">
         <Header />
         <ErrorModal
           isOpen={showErrorModal}
           onClose={() => setShowErrorModal(false)}
         />
+        <div className="w-full">
+          <div className={`flex flex-col md:flex-row gap-4 max-w-6xl mx-auto pb-20 ${!hasStartedGenerating ? 'justify-center' : ''}`}>
+            <div className={`w-full md:flex-1 py-4 px-3 ${!hasStartedGenerating ? 'md:max-w-2xl mx-auto' : ''}`}>
+              <section className="flex flex-col bg-gray-100 rounded-2xl p-4">
+                <div
+                  {...getRootProps()}
+                  className={`border-2 border-dashed bg-gray-100 rounded-2xl m-4 min-h-96 h-fit flex
+                flex-col items-center justify-center cursor-pointer hover:border-gray-400 transition-colors ${imageBase64 ? 'border-none' : 'border-gray-300'}`}
+                >
+                  <input {...getInputProps()} />
+                  {imageBase64 ? (
+                    <img
+                      src={imageBase64}
+                      alt="Uploaded"
+                      className="max-h-full max-w-full object-contain rounded-2xl"
+                    />
+                  ) : (
+                    <>
+                      <Upload className="w-12 h-12 text-gray-400 mb-4" />
+                      <p className="text-gray-400 text-center px-4">
+                        {isDragActive
+                          ? "Drop the image here"
+                          : "Drag & drop an image here, or click to select one"}
+                      </p>
+                    </>
+                  )}
+                </div>
+                <div className="max-w-full mb-4">
+                  <div className="flex overflow-x-auto gap-2 py-1 mx-4">
+                    {SAMPLE_IMAGES.map((image) => (
+                      <button
+                        key={image}
+                        type="button"
+                        onClick={() => handleSampleSelect(image)}
+                        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'
                           }`}
+                      >
+                        <img
+                          src={`/samples/${image}`}
+                          alt={image}
+                          className="w-full h-full object-cover rounded-lg"
+                        />
+                      </button>
+                    ))}
                   </div>
+                </div>
+              </section>
+              <section className="mt-4 space-y-4 bg-gray-100 rounded-2xl p-4">
+                <div>
                   <button
                     type="button"
+                    onClick={() => setShowSamples(!showSamples)}
+                    className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
                   >
+                    {/* <Settings size={16} /> */}
+                    <span className="font-bold">Advanced</span>
+                    <ChevronDown
+                      size={16}
+                      className={`transform transition-transform ${showSamples ? 'rotate-180' : ''
+                        }`}
+                    />
                   </button>
+                  {showSamples && (
+                    <div className="my-2 rounded-lg">
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-2">
+                            <Layers size={14} className="text-gray-600" />
+                            <label htmlFor="concurrent-requests" className="text-sm font-medium text-gray-700">
+                              Concurrent Requests: {concurrentRequests}
+                            </label>
+                          </div>
+                          <input
+                            id="concurrent-requests"
+                            type="range"
+                            min="1"
+                            max="10"
+                            value={concurrentRequests}
+                            onChange={(e) => setConcurrentRequests(Number(e.target.value))}
+                            className="w-1/2"
+                          />
                         </div>
+                        <button
+                          type="button"
+                          onClick={() => setShowPrompt(!showPrompt)}
+                          className="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-800 transition-colors"
+                        >
+                          <Pen size={14} />
+                          <span>Edit System Prompt</span>
+                          <ChevronDown
+                            size={16}
+                            className={`transform transition-transform ${showPrompt ? 'rotate-180' : ''}`}
+                          />
+                        </button>
+                        {showPrompt && (
+                          <textarea
+                            value={prompt}
+                            onChange={(e) => setPrompt(e.target.value)}
+                            className="w-full h-64 p-2 border rounded-lg font-mono text-sm mt-2 bg-white text-gray-900"
+                            placeholder="Enter your prompt here..."
+                          />
+                        )}
                       </div>
+                    </div>
                   )}
                 </div>
+              </section>
+              <section className="mt-4">
+                <button
+                  type="button"
+                  onClick={generateCode}
+                  className="px-4 py-4 bg-gray-800 text-white rounded-2xl mb-8
+                  hover:bg-gray-900  transition-colors w-full disabled:bg-gray-300 disabled:cursor-not-allowed
+                  flex items-center justify-center gap-2 font-bold"
+                  disabled={!imageBase64 || loading}
+                >
+                  {/* <Send size={16} className={loading ? 'opacity-50' : ''} /> */}
+                  <span>{loading ? "Generating..." : `Generate ${concurrentRequests} Code Snippet${concurrentRequests > 1 ? 's' : ''}`}</span>
+                </button>
+              </section>
             </div>
+            {hasStartedGenerating && (
+              <div className="w-full md:flex-1 py-4 md:py-20 px-3 animate-slide-in">
+                {loading ? (
+                  // Loading skeletons for code previews
+                  Array(concurrentRequests).fill().map((_, index) => (
+                    <div key={`skeleton-preview-${Date.now()}-${index}`} className="mb-4 p-6 rounded-3xl bg-gray-100 animate-pulse">
+                      <div className="w-full h-[500px] bg-gray-200 rounded-lg mb-4" />
+                      <div className="flex justify-between items-center">
+                        <div className="h-10 w-32 bg-gray-200 rounded-full" />
+                        <div className="h-10 w-24 bg-gray-200 rounded-full" />
+                      </div>
+                    </div>
+                  ))
+                ) : (
+                  outputs.map((output) => (
+                    <CodePreview
+                      key={output.id}
+                      output={output}
+                      onCodeChange={handleCodeChange}
+                      fullResponse={output.fullResponse}
+                    />
+                  ))
+                )}
+              </div>
+            )}
           </div>
+        </div>
       </div>
     </>
   );