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

Merge branch 'main' into hosted

Browse Source
This commit is contained in:
Abi Raja 2024-04-04 15:53:27 -04:00
commit 87d5a1da57
6 changed files with 85 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -84,6 +84,7 @@ The app will be up and running at http://localhost:5173. Note that you can't dev
- **How do I get an OpenAI API key?** See https://github.com/abi/screenshot-to-code/blob/main/Troubleshooting.md
- **How can I configure an OpenAI proxy?** - you can configure the OpenAI base URL if you need to use a proxy: Set OPENAI_BASE_URL in the `backend/.env` or directly in the UI in the settings dialog
- **How can I update the backend host that my front-end connects to?** - Configure VITE_HTTP_BACKEND_URL and VITE_WS_BACKEND_URL in front/.env.local For example, set VITE_HTTP_BACKEND_URL=http://124.10.20.1:7001
- **Seeing UTF-8 errors when running the backend?** - On windows, open the .env file with notepad++, then go to Encoding and select UTF-8.
- **How can I provide feedback?** For feedback, feature requests and bug reports, open an issue or ping me on [Twitter](https://twitter.com/_abi_).
## 📚 Examples

7
Troubleshooting.md
View File

@ -13,6 +13,9 @@ You don't need a ChatGPT Pro account. Screenshot to code uses API keys from your
6. Go to Screenshot to code and paste it in the Settings dialog under OpenAI key (gear icon). Your key is only stored in your browser. Never stored on our servers.
Some users have also reported that it can take upto 30 minutes after your credit purchase for the GPT4 vision model to be activated.
## Still not working?
If you've followed these steps, and it still doesn't work, feel free to open a Github issue.
- Some users have also reported that it can take upto 30 minutes after your credit purchase for the GPT4 vision model to be activated.
- You need to add credits to your account AND set it to renew when credits run out in order to be upgraded to Tier 1. Make sure your "Settings > Limits" page shows that you are at Tier 1.
If you've followed these steps, and it still doesn't work, feel free to open a Github issue. We only provide support for the open source version since we don't have debugging logs on the hosted version. If you're looking to use the hosted version, we recommend getting a paid subscription on screenshottocode.com

18
blog/video-to-app.md
View File

@ -1,18 +0,0 @@
## Capture a screen recording of a web site in action and have the AI build it for you.
* Unlike screenshots, the app will not visually look exactly like the screen recording but it will be functional
* IMPORTANT: This is very experimental and each call is expensive (a few dollars). I would recommend setting up usage limits on your Anthropic account to avoid excess charges.
## Setup
This uses Claude 3 by Anthropic. Add an env var ANTHROPIC_API_KEY to backend/.env with your API key from Anthropic.
## Examples
https://github.com/abi/screenshot-to-code/assets/23818/fe236c1e-ab92-4d84-b63d-e73e5be9a726
## Tips for taking videos
* We extract frames from your video so linger over each feature for a second or two.

94
frontend/src/App.tsx
View File

@ -41,7 +41,7 @@ import { CodeGenerationModel } from "./lib/models";
import ModelSettingsSection from "./components/ModelSettingsSection";
import { extractHtml } from "./components/preview/extractHtml";
import useBrowserTabIndicator from "./hooks/useBrowserTabIndicator";
import { URLS } from "./urls";
import TipLink from "./components/core/TipLink";
const IS_OPENAI_DOWN = false;
@ -155,6 +155,25 @@ function App({ navbarComponent }: Props) {
setShouldIncludeResultImage(false);
};
const regenerate = () => {
if (currentVersion === null) {
toast.error(
"No current version set. Please open a Github issue as this shouldn't happen."
);
return;
}
// Retrieve the previous command
const previousCommand = appHistory[currentVersion];
if (previousCommand.type !== "ai_create") {
toast.error("Only the first version can be regenerated.");
return;
}
// Re-run the create
doCreate(referenceImages, inputMode);
};
const cancelCodeGeneration = () => {
wsRef.current?.close?.(USER_CLOSE_WEB_SOCKET_CODE);
// make sure stop can correct the state even if the websocket is already closed
@ -397,14 +416,7 @@ function App({ navbarComponent }: Props) {
}
/>
<a
className="text-xs underline text-gray-500 text-right"
href={URLS.tips}
target="_blank"
rel="noopener"
>
Tips for better results
</a>
{appState !== AppState.CODE_READY && <TipLink />}
{IS_RUNNING_ON_CLOUD &&
!(settings.openAiApiKey || settings.accessCode) &&
@ -477,21 +489,17 @@ function App({ navbarComponent }: Props) {
Update
</Button>
</div>
<div className="flex items-center gap-x-2 mt-2">
<div className="flex items-center justify-end gap-x-2 mt-2">
<Button
onClick={downloadCode}
onClick={regenerate}
className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
>
<FaDownload /> Download
</Button>
<Button
onClick={reset}
className="flex items-center gap-x-2 dark:text-white dark:bg-gray-700"
>
<FaUndo />
Reset
🔄 Regenerate
</Button>
</div>
<div className="flex justify-end items-center mt-2">
<TipLink />
</div>
</div>
)}
@ -581,19 +589,41 @@ function App({ navbarComponent }: Props) {
{(appState === AppState.CODING || appState === AppState.CODE_READY) && (
<div className="ml-4">
<Tabs defaultValue="desktop">
<div className="flex justify-end mr-8 mb-4">
<TabsList>
<TabsTrigger value="desktop" className="flex gap-x-2">
<FaDesktop /> Desktop
</TabsTrigger>
<TabsTrigger value="mobile" className="flex gap-x-2">
<FaMobile /> Mobile
</TabsTrigger>
<TabsTrigger value="code" className="flex gap-x-2">
<FaCode />
Code
</TabsTrigger>
</TabsList>
<div className="flex justify-between mr-8 mb-4">
<div className="flex items-center gap-x-2">
{appState === AppState.CODE_READY && (
<>
<Button
onClick={reset}
className="flex items-center ml-4 gap-x-2 dark:text-white dark:bg-gray-700"
>
<FaUndo />
Reset
</Button>
<Button
onClick={downloadCode}
variant="secondary"
className="flex items-center gap-x-2 mr-4 dark:text-white dark:bg-gray-700"
>
<FaDownload /> Download
</Button>
</>
)}
</div>
<div className="flex items-center">
<TabsList>
<TabsTrigger value="desktop" className="flex gap-x-2">
<FaDesktop /> Desktop
</TabsTrigger>
<TabsTrigger value="mobile" className="flex gap-x-2">
<FaMobile /> Mobile
</TabsTrigger>
<TabsTrigger value="code" className="flex gap-x-2">
<FaCode />
Code
</TabsTrigger>
</TabsList>
</div>
</div>
<TabsContent value="desktop">
<Preview code={previewCode} device="desktop" />

2
frontend/src/components/ModelSettingsSection.tsx
View File

@ -29,7 +29,7 @@ function ModelSettingsSection({
return (
<div className="flex flex-col gap-y-2 justify-between text-sm">
<div className="grid grid-cols-3 items-center gap-4">
<span>Model:</span>
<span>AI Model:</span>
<Select
value={codeGenerationModel}
onValueChange={(value: string) =>

16
frontend/src/components/core/TipLink.tsx Normal file
View File

@ -0,0 +1,16 @@
import { URLS } from "../../urls";
function TipLink() {
return (
<a
className="text-xs underline text-gray-500 text-right"
href={URLS.tips}
target="_blank"
rel="noopener"
>
Tips for better results
</a>
);
}
export default TipLink;