Hugging Face's logo

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

App Files Community
Trudy commited on
Commit
a5fe725
·
1 Parent(s): f00e3e4

did styling for mobile

Browse files
Files changed (3) hide show
  1. components/CodePreview.js +4 -4
  2. components/Header.js +16 -13
  3. pages/index.js +7 -7
components/CodePreview.js CHANGED
@@ -182,8 +182,8 @@ const CodePreview = ({ output, onCodeChange, fullResponse }) => {
182
  )}
183
  </div>
184
 
185
- <div className="flex justify-between items-center mt-2">
186
- <div className="inline-flex rounded-full bg-gray-200 gap-1">
187
  <ToggleButton
188
  icon={Play}
189
  label="Preview"
@@ -215,8 +215,8 @@ const CodePreview = ({ output, onCodeChange, fullResponse }) => {
215
  <button
216
  type="button"
217
  onClick={handleCopy}
218
- className={`px-3.5 py-2.5 rounded-full transition-colors inline-flex text-sm border border-gray-300
219
- items-center gap-1 ${
220
  isCopied
221
  ? "bg-gray-500 text-white"
222
  : "bg-transparent text-gray-700 hover:bg-gray-100"
 
182
  )}
183
  </div>
184
 
185
+ <div className="flex flex-col sm:flex-row justify-between items-center gap-3 mt-2">
186
+ <div className="inline-flex rounded-full bg-gray-200 gap-1 w-full sm:w-auto justify-center">
187
  <ToggleButton
188
  icon={Play}
189
  label="Preview"
 
215
  <button
216
  type="button"
217
  onClick={handleCopy}
218
+ className={`px-3.5 py-2.5 rounded-full transition-colors inline-flex text-sm border border-gray-300
219
+ items-center gap-1 w-full sm:w-auto justify-center ${
220
  isCopied
221
  ? "bg-gray-500 text-white"
222
  : "bg-transparent text-gray-700 hover:bg-gray-100"
components/Header.js CHANGED
@@ -3,18 +3,21 @@ 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 justify-between items-center text-base">
8
- <div className="text-gray-500">
9
- <span className="text-black font-bold text-lg mr-2">Image to Code</span>
10
- Built with <a
11
- href="https://ai.google.dev"
12
- target="_blank"
13
- rel="noopener noreferrer"
14
- className="underline hover:text-gray-800 transition-colors"
15
- >
16
- Gemini 2.0
17
- </a>
 
 
 
18
  </div>
19
 
20
  <div className="flex items-center gap-3">
@@ -22,7 +25,7 @@ const Header = () => {
22
  href="https://github.com/googlecreativelab/gemini-demos/tree/main/image-to-code"
23
  target="_blank"
24
  rel="noopener noreferrer"
25
- className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors "
26
  >
27
  <Github size={18} className="text-gray-600" />
28
  <span>GitHub Repository</span>
 
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>
10
+ <span className="text-gray-500">
11
+ Built with{' '}
12
+ <a
13
+ href="https://ai.google.dev"
14
+ target="_blank"
15
+ rel="noopener noreferrer"
16
+ className="underline hover:text-gray-800 transition-colors"
17
+ >
18
+ Gemini 2.0
19
+ </a>
20
+ </span>
21
  </div>
22
 
23
  <div className="flex items-center gap-3">
 
25
  href="https://github.com/googlecreativelab/gemini-demos/tree/main/image-to-code"
26
  target="_blank"
27
  rel="noopener noreferrer"
28
+ className="flex items-center gap-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
29
  >
30
  <Github size={18} className="text-gray-600" />
31
  <span>GitHub Repository</span>
pages/index.js CHANGED
@@ -291,16 +291,16 @@ export default function Home() {
291
  <Head>
292
  <title>Image to Code</title>
293
  </Head>
294
- <div className="h-screen max-h-screen bg-white flex items-center justify-center overflow-y-hidden tracking-[-0.005em]">
295
  <Header />
296
  <ErrorModal
297
  isOpen={showErrorModal}
298
  onClose={() => setShowErrorModal(false)}
299
  />
300
 
301
- <div className="w-full h-full max-h-full overflow-hidden bg-white">
302
- <div className={`flex flex-col md:flex-row gap-0 max-w-6xl mx-auto py-0 h-full transition-all duration-500 ${!hasStartedGenerating ? 'justify-center' : ''}`}>
303
- <div className={`flex-1 h-full overflow-y-auto 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()}
@@ -317,7 +317,7 @@ export default function Home() {
317
  ) : (
318
  <>
319
  <Upload className="w-12 h-12 text-gray-400 mb-4" />
320
- <p className="text-gray-400">
321
  {isDragActive
322
  ? "Drop the image here"
323
  : "Drag & drop an image here, or click to select one"}
@@ -399,7 +399,7 @@ export default function Home() {
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"
403
  placeholder="Enter your prompt here..."
404
  />
405
  )}
@@ -426,7 +426,7 @@ export default function Home() {
426
  </div>
427
 
428
  {hasStartedGenerating && (
429
- <div className="flex-1 h-full overflow-y-scroll py-20 px-3 animate-slide-in">
430
  {loading ? (
431
  // Loading skeletons for code previews
432
  Array(concurrentRequests).fill().map((_, index) => (
 
291
  <Head>
292
  <title>Image to Code</title>
293
  </Head>
294
+ <div className="min-h-screen bg-white tracking-[-0.005em]">
295
  <Header />
296
  <ErrorModal
297
  isOpen={showErrorModal}
298
  onClose={() => setShowErrorModal(false)}
299
  />
300
 
301
+ <div className="w-full pt-24 sm:pt-16">
302
+ <div className={`flex flex-col md:flex-row gap-4 max-w-6xl mx-auto 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()}
 
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"}
 
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
  )}
 
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) => (