diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..bffb357
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+ "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..fd3dbb5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..ae8e0d4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+ "semi": false,
+ "singleQuote": true,
+ "trailingComma": "all",
+ "printWidth": 120,
+ "tabWidth": 2,
+ "useTabs": true
+}
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..c403366
--- /dev/null
+++ b/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/app/api/generate-code-from-image/route.ts b/app/api/generate-code-from-image/route.ts
new file mode 100644
index 0000000..3f894d7
--- /dev/null
+++ b/app/api/generate-code-from-image/route.ts
@@ -0,0 +1,66 @@
+// ./app/api/chat/route.js
+import OpenAI from 'openai'
+import { OpenAIStream, StreamingTextResponse } from 'ai'
+
+const USER_PROMPT = 'Generate code a web page that looks exactly like this'
+
+const SYSTEM_PROMPT= `You are an expert Tailwind developer
+You take screenshots of a reference web page from the user, and then build single page apps
+using Tailwind, HTML and JS.
+You might also be given a screenshot(The second image) of a web page that you have already built, and asked to
+update it to look more like the reference image(The first image).
+
+- Make sure the app looks exactly like the screenshot.
+- Pay close attention to background color, text color, font size, font family,
+padding, margin, border, etc. Match the colors and sizes exactly.
+- Use the exact text from the screenshot.
+- Do not add comments in the code such as "" and "" in place of writing the full code. WRITE THE FULL CODE.
+- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "" or bad things will happen.
+- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later.
+
+In terms of libraries,
+
+- Use this script to include Tailwind:
+- You can use Google Fonts
+- Font Awesome for icons:
+
+Return only the full code in tags.
+Do not include markdown "\`\`\`" or "\`\`\`html" at the start or end.`
+
+
+const openai = new OpenAI({
+ apiKey: process.env.OPENAI_API_KEY,
+})
+
+export const runtime = 'edge' //vs cloud. Edge is faster but more expensive
+
+export async function POST(req: Request) {
+ const { url } = await req.json()
+ const response = await openai.chat.completions.create({
+ model: 'gpt-4-vision-preview',
+ stream: true,
+ max_tokens: 4096,
+ messages: [
+ {
+ role: 'system',
+ content: SYSTEM_PROMPT,
+ },
+ {
+ role: 'user',
+ content: [
+ {
+ type: 'text',
+ text: USER_PROMPT,
+ },
+ {
+ type: 'image_url',
+ image_url: url
+ },
+ ],
+ }
+ ],
+ });
+
+ const stream = OpenAIStream(response)
+ return new StreamingTextResponse(stream)
+}
diff --git a/app/favicon.ico b/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/app/favicon.ico differ
diff --git a/app/form.tsx b/app/form.tsx
new file mode 100644
index 0000000..6276d69
--- /dev/null
+++ b/app/form.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { FormEvent } from 'react'
+
+export const Form = ({transformUrlToCode} : {transformUrlToCode: (url: string) => void}) =>{
+
+ const handleSubmit = (evt: FormEvent) => {
+ const form = evt.currentTarget as HTMLFormElement;
+ const url = form.elements.namedItem('url') as HTMLInputElement;
+ transformUrlToCode(url.value);
+ }
+
+ return (
+
+ )
+}
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..6a75725
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 222.2 84% 4.9%;
+
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 84% 4.9%;
+
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 84% 4.9%;
+
+ --primary: 222.2 47.4% 11.2%;
+ --primary-foreground: 210 40% 98%;
+
+ --secondary: 210 40% 96.1%;
+ --secondary-foreground: 222.2 47.4% 11.2%;
+
+ --muted: 210 40% 96.1%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+
+ --accent: 210 40% 96.1%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+
+ --destructive: 0 84.2% 60.2%;
+ --destructive-foreground: 210 40% 98%;
+
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+ --ring: 222.2 84% 4.9%;
+
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+
+ --card: 222.2 84% 4.9%;
+ --card-foreground: 210 40% 98%;
+
+ --popover: 222.2 84% 4.9%;
+ --popover-foreground: 210 40% 98%;
+
+ --primary: 210 40% 98%;
+ --primary-foreground: 222.2 47.4% 11.2%;
+
+ --secondary: 217.2 32.6% 17.5%;
+ --secondary-foreground: 210 40% 98%;
+
+ --muted: 217.2 32.6% 17.5%;
+ --muted-foreground: 215 20.2% 65.1%;
+
+ --accent: 217.2 32.6% 17.5%;
+ --accent-foreground: 210 40% 98%;
+
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+
+ --border: 217.2 32.6% 17.5%;
+ --input: 217.2 32.6% 17.5%;
+ --ring: 212.7 26.8% 83.9%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
\ No newline at end of file
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..7c79674
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+ title: 'Create Next App',
+ description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..0b3edff
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,88 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { Form } from './form'
+import { useState } from 'react'
+
+const STEPS = {
+ INITIAL: 'INITIAL',
+ LOADING: 'LOADING',
+ PREVIEW: 'PREVIEW',
+ ERROR: 'ERROR',
+}
+
+export default function Home() {
+ const [result, setResult] = useState('')
+ const [step, setStep] = useState(STEPS.INITIAL)
+
+ const transformUrlToCode = async (url: string) => {
+ setStep(STEPS.LOADING)
+ const res = await fetch('/api/generate-code-from-image', {
+ method: 'POST',
+ body: JSON.stringify({ url }),
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+
+ if (!res.ok || res.body === null) {
+ throw new Error('Error al generar el código')
+ setStep(STEPS.ERROR)
+ }
+
+ setStep(STEPS.PREVIEW)
+
+ const reader = res.body.getReader()
+ const decoder = new TextDecoder('utf-8')
+
+ while (true) {
+ const { done, value } = await reader.read()
+ const chunk = decoder.decode(value)
+
+ setResult((prevResult) => prevResult + chunk)
+
+ console.log(chunk)
+ if (done) break
+ }
+ }
+
+ return (
+
+
+
+
+ {step == STEPS.INITIAL && (
+
+
+
+ )}
+
+ {step == STEPS.LOADING && (
+
+
Generando código...
+
+
+