Github/screenshot-to-code
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge bad1335028 into 392b9849a2

Browse Source
This commit is contained in:
Naman Dhingra 2024-06-12 01:09:53 +05:30 committed by GitHub
commit a3fa0386d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 145 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
backend/prompts/__init__.py
View File

@ -15,17 +15,47 @@ SVG_USER_PROMPT = """
Generate code for a SVG that looks exactly like this.
"""
TAILWIND_USER_PROMPT = """
Incorporate the below given Tailwind CSS configuration into your project to customize its appearance. The configuration may have the custom fonts, colours, sizes, spacing which can be used to match the original image. Also add the configuration in the following way:
<script>
tailwind.config = {
// Add the configuration here
}
</script>
The configuration is:
"""
def assemble_imported_code_prompt(
code: str, stack: Stack, result_image_data_url: Union[str, None] = None
code: str,
stack: Stack,
tailwind_config: Union[str, None],
result_image_data_url: Union[str, None] = None,
) -> List[ChatCompletionMessageParam]:
system_content = IMPORTED_CODE_SYSTEM_PROMPTS[stack]
user_content = (
user_content: List[ChatCompletionContentPartParam] = [
{
"type": "text",
"text": (
"Here is the code of the app: " + code
if stack != "svg"
else "Here is the code of the SVG: " + code
),
},
]
if tailwind_config is not None:
user_content.insert(
1,
{
"type": "text",
"text": TAILWIND_USER_PROMPT + tailwind_config,
},
)
return [
{
"role": "system",
@ -42,8 +72,10 @@ def assemble_imported_code_prompt(
def assemble_prompt(
image_data_url: str,
stack: Stack,
tailwind_config: Union[str, None],
result_image_data_url: Union[str, None] = None,
) -> List[ChatCompletionMessageParam]:
system_content = SYSTEM_PROMPTS[stack]
user_prompt = USER_PROMPT if stack != "svg" else SVG_USER_PROMPT
@ -67,6 +99,16 @@ def assemble_prompt(
"image_url": {"url": result_image_data_url, "detail": "high"},
},
)
if tailwind_config is not None:
user_content.insert(
2,
{
"type": "text",
"text": TAILWIND_USER_PROMPT + tailwind_config,
},
)
return [
{
"role": "system",

6
backend/routes/generate_code.py
View File

@ -166,7 +166,7 @@ async def stream_code(websocket: WebSocket):
if params.get("isImportedFromCode") and params["isImportedFromCode"]:
original_imported_code = params["history"][0]
prompt_messages = assemble_imported_code_prompt(
original_imported_code, valid_stack
original_imported_code, valid_stack, params["tailwindConfig"]
)
for index, text in enumerate(params["history"][1:]):
if index % 2 == 0:
@ -185,10 +185,10 @@ async def stream_code(websocket: WebSocket):
try:
if params.get("resultImage") and params["resultImage"]:
prompt_messages = assemble_prompt(
params["image"], valid_stack, params["resultImage"]
params["image"], valid_stack, params["tailwindConfig"], params["resultImage"],
)
else:
prompt_messages = assemble_prompt(params["image"], valid_stack)
prompt_messages = assemble_prompt(params["image"], valid_stack, params["tailwindConfig"])
except:
await websocket.send_json(
{

105
frontend/src/App.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from "react";
import { useEffect, useRef, useState, ChangeEvent } from "react";
import ImageUpload from "./components/ImageUpload";
import CodePreview from "./components/CodePreview";
import Preview from "./components/Preview";
@ -14,7 +14,9 @@ import {
} from "react-icons/fa";
import { Switch } from "./components/ui/switch";
// import { Label } from "./components/ui/label";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
import SettingsDialog from "./components/SettingsDialog";
@ -49,6 +51,8 @@ function App() {
const [appState, setAppState] = useState<AppState>(AppState.INITIAL);
const [generatedCode, setGeneratedCode] = useState<string>("");
const [enableCustomTailwindConfig, setEnableCustomTailwindConfig] = useState<boolean>(false);
const [inputMode, setInputMode] = useState<"image" | "video">("image");
const [referenceImages, setReferenceImages] = useState<string[]>([]);
@ -71,6 +75,7 @@ function App() {
codeGenerationModel: CodeGenerationModel.GPT_4O_2024_05_13,
// Only relevant for hosted version
isTermOfServiceAccepted: false,
tailwindConfig: null,
},
"setting"
);
@ -393,6 +398,44 @@ function App() {
setAppState(AppState.CODE_READY);
}
const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
const target = event.target as HTMLInputElement;
const file: File = (target.files as FileList)[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const content = e!.target!.result;
if (typeof content === 'string') {
setSettings((s: Settings) => ({
...s,
tailwindConfig: content,
}));
} else {
toast.error('Please select a valid Tailwind config file');
}
};
reader.readAsText(file);
}
};
const handleRemoveFile = () => {
try {
const input = document.getElementById('config-file') as HTMLInputElement;
const dt = new DataTransfer();
if(input == null) {
return;
}
input.files = dt.files
setSettings((s: Settings) => ({
...s,
tailwindConfig: null,
}));
} catch (err) {
toast.error('Please select a valid Tailwind config file');
}
};
return (
<div className="mt-2 dark:bg-black dark:text-white">
{IS_RUNNING_ON_CLOUD && <PicoBadge />}
@ -403,7 +446,7 @@ function App() {
/>
)}
<div className="lg:fixed lg:inset-y-0 lg:z-40 lg:flex lg:w-96 lg:flex-col">
<div className="flex grow flex-col gap-y-2 overflow-y-auto border-r border-gray-200 bg-white px-6 dark:bg-zinc-950 dark:text-white">
<div className="flex flex-col px-6 overflow-y-auto bg-white border-r border-gray-200 grow gap-y-2 dark:bg-zinc-950 dark:text-white">
<div className="flex items-center justify-between mt-10 mb-2">
<h1 className="text-2xl ">Screenshot to Code</h1>
<SettingsDialog settings={settings} setSettings={setSettings} />
@ -425,16 +468,39 @@ function App() {
}
/>
<div className="flex flex-row items-center justify-between w-full gap-4 my-2 text-sm m-y-2">
<span>Enable custom Tailwind configuration:</span>
<Switch
id="image-generation"
checked={enableCustomTailwindConfig}
onCheckedChange={() =>
setEnableCustomTailwindConfig(!enableCustomTailwindConfig)
}
/>
</div>
{enableCustomTailwindConfig && (<div className="flex flex-row gap-2">
<Input
id="config-file"
type="file"
accept=".js,.ts"
onChange={handleFileChange}
/>
<Button onClick={handleRemoveFile}>
Remove
</Button>
</div>)}
{showReactWarning && (
<div className="text-sm bg-yellow-200 rounded p-2">
<div className="p-2 text-sm bg-yellow-200 rounded">
Sorry - React is not currently working with GPT-4 Turbo. Please
use GPT-4 Vision or Claude Sonnet. We are working on a fix.
</div>
)}
{showGpt4OMessage && (
<div className="rounded-lg p-2 bg-fuchsia-200">
<p className="text-gray-800 text-sm">
<div className="p-2 rounded-lg bg-fuchsia-200">
<p className="text-sm text-gray-800">
Now supporting GPT-4o. Higher quality and 2x faster. Give it a
try!
</p>
@ -446,7 +512,7 @@ function App() {
{IS_RUNNING_ON_CLOUD && !settings.openAiApiKey && <OnboardingNote />}
{IS_OPENAI_DOWN && (
<div className="bg-black text-white dark:bg-white dark:text-black p-3 rounded">
<div className="p-3 text-white bg-black rounded dark:bg-white dark:text-black">
OpenAI API is currently down. Try back in 30 minutes or later. We
apologize for the inconvenience.
</div>
@ -461,8 +527,7 @@ function App() {
{/* Speed disclaimer for video mode */}
{inputMode === "video" && (
<div
className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700
p-2 text-xs mb-4 mt-1"
className="p-2 mt-1 mb-4 text-xs text-yellow-700 bg-yellow-100 border-l-4 border-yellow-500"
>
Code generation from videos can take 3-4 minutes. We do
multiple passes to get the best result. Please be patient.
@ -495,8 +560,8 @@ function App() {
onChange={(e) => setUpdateInstruction(e.target.value)}
value={updateInstruction}
/>
<div className="flex justify-between items-center gap-x-2">
<div className="font-500 text-xs text-slate-700 dark:text-white">
<div className="flex items-center justify-between gap-x-2">
<div className="text-xs font-500 text-slate-700 dark:text-white">
Include screenshot of current version?
</div>
<Switch
@ -512,7 +577,7 @@ function App() {
Update
</Button>
</div>
<div className="flex items-center justify-end gap-x-2 mt-2">
<div className="flex items-center justify-end mt-2 gap-x-2">
<Button
onClick={regenerate}
className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700 regenerate-btn"
@ -523,14 +588,14 @@ function App() {
<SelectAndEditModeToggleButton />
)}
</div>
<div className="flex justify-end items-center mt-2">
<div className="flex items-center justify-end mt-2">
<TipLink />
</div>
</div>
)}
{/* Reference image display */}
<div className="flex gap-x-2 mt-2">
<div className="flex mt-2 gap-x-2">
{referenceImages.length > 0 && (
<div className="flex flex-col">
<div
@ -555,21 +620,21 @@ function App() {
/>
)}
</div>
<div className="text-gray-400 uppercase text-sm text-center mt-1">
<div className="mt-1 text-sm text-center text-gray-400 uppercase">
{inputMode === "video"
? "Original Video"
: "Original Screenshot"}
</div>
</div>
)}
<div className="bg-gray-400 px-4 py-2 rounded text-sm hidden">
<h2 className="text-lg mb-4 border-b border-gray-800">
<div className="hidden px-4 py-2 text-sm bg-gray-400 rounded">
<h2 className="mb-4 text-lg border-b border-gray-800">
Console
</h2>
{executionConsole.map((line, index) => (
<div
key={index}
className="border-b border-gray-400 mb-2 text-gray-600 font-mono"
className="mb-2 font-mono text-gray-600 border-b border-gray-400"
>
{line}
</div>
@ -600,7 +665,7 @@ function App() {
<main className="py-2 lg:pl-96">
{appState === AppState.INITIAL && (
<div className="flex flex-col justify-center items-center gap-y-10">
<div className="flex flex-col items-center justify-center gap-y-10">
<ImageUpload setReferenceImages={doCreate} />
<UrlInputSection
doCreate={doCreate}
@ -613,7 +678,7 @@ function App() {
{(appState === AppState.CODING || appState === AppState.CODE_READY) && (
<div className="ml-4">
<Tabs defaultValue="desktop">
<div className="flex justify-between mr-8 mb-4">
<div className="flex justify-between mb-4 mr-8">
<div className="flex items-center gap-x-2">
{appState === AppState.CODE_READY && (
<>
@ -627,7 +692,7 @@ function App() {
<Button
onClick={downloadCode}
variant="secondary"
className="flex items-center gap-x-2 mr-4 dark:text-white dark:bg-gray-700 download-btn"
className="flex items-center mr-4 gap-x-2 dark:text-white dark:bg-gray-700 download-btn"
>
<FaDownload /> Download
</Button>

16
frontend/src/components/SettingsDialog.tsx
View File

@ -30,7 +30,7 @@ interface Props {
function SettingsDialog({ settings, setSettings }: Props) {
const handleThemeChange = (theme: EditorTheme) => {
setSettings((s) => ({
setSettings((s: Settings) => ({
...s,
editorTheme: theme,
}));
@ -49,7 +49,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
<div className="flex items-center space-x-2">
<Label htmlFor="image-generation">
<div>DALL-E Placeholder Image Generation</div>
<div className="font-light mt-2 text-xs">
<div className="mt-2 text-xs font-light">
More fun with it but if you want to save money, turn it off.
</div>
</Label>
@ -68,7 +68,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
<div>
<Label htmlFor="openai-api-key">
<div>OpenAI API key</div>
<div className="font-light mt-1 mb-2 text-xs leading-relaxed">
<div className="mt-1 mb-2 text-xs font-light leading-relaxed">
Only stored in your browser. Never stored on servers. Overrides
your .env config.
</div>
@ -91,7 +91,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
<div>
<Label htmlFor="openai-api-key">
<div>OpenAI Base URL (optional)</div>
<div className="font-light mt-2 leading-relaxed">
<div className="mt-2 font-light leading-relaxed">
Replace with a proxy URL if you don't want to use the default.
</div>
</Label>
@ -113,7 +113,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
<div>
<Label htmlFor="anthropic-api-key">
<div>Anthropic API key</div>
<div className="font-light mt-1 text-xs leading-relaxed">
<div className="mt-1 text-xs font-light leading-relaxed">
Only stored in your browser. Never stored on servers. Overrides
your .env config.
</div>
@ -137,7 +137,7 @@ function SettingsDialog({ settings, setSettings }: Props) {
<AccordionTrigger>Screenshot by URL Config</AccordionTrigger>
<AccordionContent>
<Label htmlFor="screenshot-one-api-key">
<div className="leading-normal font-normal text-xs">
<div className="text-xs font-normal leading-normal">
If you want to use URLs directly instead of taking the
screenshot yourself, add a ScreenshotOne API key.{" "}
<a
@ -169,14 +169,14 @@ function SettingsDialog({ settings, setSettings }: Props) {
<Accordion type="single" collapsible className="w-full">
<AccordionItem value="item-1">
<AccordionTrigger>Theme Settings</AccordionTrigger>
<AccordionContent className="space-y-4 flex flex-col">
<AccordionContent className="flex flex-col space-y-4">
<div className="flex items-center justify-between">
<Label htmlFor="app-theme">
<div>App Theme</div>
</Label>
<div>
<button
className="flex rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50t"
className="flex px-3 py-1 text-sm transition-colors bg-transparent border rounded-md shadow-sm border-input file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50t"
onClick={() => {
document
.querySelector("div.mt-2")

1
frontend/src/types.ts
View File

@ -17,6 +17,7 @@ export interface Settings {
// Only relevant for hosted version
isTermOfServiceAccepted: boolean;
anthropicApiKey: string | null; // Added property for anthropic API key
tailwindConfig: string | null; // Added property for tailwind config
}
export enum AppState {