迁移分享：屏幕截图转为HTML或vue代码
fdecb93ea6
# Aider chat conversation:
USER: add previ
ASSISTANT:
^C KeyboardInterrupt
USER: add `frontend/src/components/Preview.tsx`
ASSISTANT: Sure, I can help with that. Could you please provide more details about the changes you want to make in `frontend/src/components/Preview.tsx`?
USER: add a button to download the code as index.html
ASSISTANT: To add a download button, we need to modify the `frontend/src/components/Preview.tsx` file. We will add a new button that, when clicked, will trigger a download of the generated code as an `index.html` file.
Here is the step-by-step plan:
1. Import the `useState` hook from React.
2. Create a new state variable `blobUrl` and a function `createBlobUrl` to update it.
3. In the `createBlobUrl` function, create a new Blob from the `code` prop, create a URL for the Blob, and set `blobUrl` to this URL.
4. Add a new button that triggers the `createBlobUrl` function when clicked.
5. Set the `href` attribute of the button to `blobUrl` and the `download` attribute to `index.html`.
Here is the *edit block* for these changes:
```jsx
frontend/src/components/Preview.tsx
<<<<<<< HEAD
interface Props {
code: string;
}
function Preview({ code }: Props) {
return (
<div className="w-[704px]">
<iframe
title="Iframe Example"
srcDoc={code}
className="border-[5px] border-black rounded-[33px] p-4 shadow-lg
transform scale-[0.8] origin-top-left w-[1280px] h-[832px]"
></iframe>
</div>
);
}
export default Preview;
=======
import { useState } from 'react';
interface Props {
code: string;
}
function Preview({ code }: Props) {
const [blobUrl, setBlobUrl] = useState('');
const createBlobUrl = () => {
const blob = new Blob([code], { type: 'text/html' });
const url = URL.createObjectURL(blob);
setBlobUrl(url);
};
return (
<div className="w-[704px]">
<iframe
title="Iframe Example"
srcDoc={code}
className="border-[5px] border-black rounded-[33px] p-4 shadow-lg
transform scale-[0.8] origin-top-left w-[1280px] h-[832px]"
></iframe>
<button onClick={createBlobUrl} href={blobUrl} download="index.html">
Download code
</button>
</div>
);
}
export default Preview;
>>>>>>> updated
```
|
||
|---|---|---|
| backend | ||
| frontend | ||
| .gitattributes | ||
| .gitignore | ||
| LICENSE | ||
| README.md | ||
[Video Demo]
Instructions
Run the backend
poetry install
poetry run uvicorn main:app --reload --port 7000
Run the frontend,
yarn
yarn dev
Hosted Version
Hosted version coming soon at https://picoapps.xyz
Environment Variables
.env.local contains VITE_WS_BACKEND_URL=ws://127.0.0.1:7000