Skip to content

Commit

Permalink
Initial Commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@SawyerHood
SawyerHood committed Nov 8, 2023
1 parent c30b847 commit c95ae27
Show file tree
Hide file tree
Showing 11 changed files with 2,381 additions and 238 deletions.
78 changes: 78 additions & 0 deletions app/api/toHtml/route.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
const systemPrompt = `You are an expert tailwind developer. A user will provide you with a
low-fidelity wireframe of an application and you will return
a single html file that uses tailwind to create the website. Use creative license to make the application more fleshed out.
if you need to insert an image, use placehold.co to create a placeholder image. Respond only with the html file.`;

export async function POST(request: Request) {
const { image } = await request.json();
const body: GPT4VCompletionRequest = {
model: "gpt-4-vision-preview",
max_tokens: 4096,
messages: [
{
role: "system",
content: systemPrompt,
},
{
role: "user",
content: [
{
type: "image_url",
image_url: image,
},
"Turn this into a single html file using tailwind.",
],
},
],
};

let json = null;
try {
const resp = await fetch("https://api.openai.com/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
},
body: JSON.stringify(body),
});
json = await resp.json();
} catch (e) {
console.log(e);
}

return new Response(JSON.stringify(json), {
headers: {
"content-type": "application/json; charset=UTF-8",
},
});
}

type MessageContent =
| string
| (string | { type: "image_url"; image_url: string })[];

export type GPT4VCompletionRequest = {
model: "gpt-4-vision-preview";
messages: {
role: "system" | "user" | "assistant" | "function";
content: MessageContent;
name?: string | undefined;
}[];
functions?: any[] | undefined;
function_call?: any | undefined;
stream?: boolean | undefined;
temperature?: number | undefined;
top_p?: number | undefined;
max_tokens?: number | undefined;
n?: number | undefined;
best_of?: number | undefined;
frequency_penalty?: number | undefined;
presence_penalty?: number | undefined;
logit_bias?:
| {
[x: string]: number;
}
| undefined;
stop?: (string[] | string) | undefined;
};
24 changes: 4 additions & 20 deletions app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,10 @@
@tailwind components;
@tailwind utilities;

:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
.tlui-help-menu {
display: none !important;
}

@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
}

body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
.tlui-debug-panel {
display: none !important;
}
24 changes: 15 additions & 9 deletions app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,28 @@
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";

const inter = Inter({ subsets: ['latin'] })
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
title: "Create Next App",
description: "Generated by create next app",
};

export default function RootLayout({
children,
}: {
children: React.ReactNode
children: React.ReactNode;
}) {
return (
<html lang="en">
<head>
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
</head>
<body className={inter.className}>{children}</body>
</html>
)
);
}
203 changes: 98 additions & 105 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,106 @@
import Image from 'next/image'
"use client";

export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing&nbsp;
<code className="font-mono font-bold">app/page.tsx</code>
</p>
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
<a
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className="dark:invert"
width={100}
height={24}
priority
/>
</a>
</div>
</div>
import dynamic from "next/dynamic";
import "@tldraw/tldraw/tldraw.css";
import { useEditor } from "@tldraw/tldraw";
import { getSvgAsImage } from "@/lib/getSvgAsImage";
import { blobToBase64 } from "@/lib/blobToBase64";
import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import { PreviewModal } from "@/components/PreviewModal";

<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
</div>
const Tldraw = dynamic(async () => (await import("@tldraw/tldraw")).Tldraw, {
ssr: false,
});

<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Docs{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Find in-depth information about Next.js features and API.
</p>
</a>
export default function Home() {
const [html, setHtml] = useState<null | string>(null);

<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Learn{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
</a>
useEffect(() => {
const listener = (e: KeyboardEvent) => {
if (e.key === "Escape") {
setHtml(null);
}
};
window.addEventListener("keydown", listener);

<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Templates{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Explore the Next.js 13 playground.
</p>
</a>
return () => {
window.removeEventListener("keydown", listener);
};
});

<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Deploy{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
return (
<>
<div className={`w-screen h-screen`}>
<Tldraw persistenceKey="tldraw">
<ExportButton setHtml={setHtml} />
</Tldraw>
</div>
</main>
)
{html &&
ReactDOM.createPortal(
<div
className="fixed top-0 left-0 right-0 bottom-0 flex justify-center items-center"
style={{ zIndex: 2000, backgroundColor: "rgba(0,0,0,0.5)" }}
onClick={() => setHtml(null)}
>
<PreviewModal html={html} setHtml={setHtml} />
</div>,
document.body
)}
</>
);
}

function ExportButton({ setHtml }: { setHtml: (html: string) => void }) {
const editor = useEditor();
const [loading, setLoading] = useState(false);
// A tailwind styled button that is pinned to the bottom right of the screen
return (
<button
onClick={async (e) => {
setLoading(true);
try {
e.preventDefault();
const svg = await editor.getSvg(
Array.from(editor.currentPageShapeIds)
);
if (!svg) {
return;
}
const png = await getSvgAsImage(svg, {
type: "png",
quality: 1,
scale: 1,
});
const dataUrl = await blobToBase64(png!);
const resp = await fetch("/api/toHtml", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ image: dataUrl }),
});

const json = await resp.json();
const message = json.choices[0].message.content;
const start = message.indexOf("<!DOCTYPE html>");
const end = message.indexOf("</html>");
const html = message.slice(start, end + "</html>".length);
setHtml(html);
} finally {
setLoading(false);
}
}}
className="fixed bottom-4 right-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ="
style={{ zIndex: 1000 }}
>
{loading ? (
<div className="flex justify-center items-center ">
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
</div>
) : (
"Make Real"
)}
</button>
);
}
Loading

0 comments on commit c95ae27

Please sign in to comment.