Screenshot to Code : outil AI permettant de convertir des captures d'écran en code frontal propre

Introduction générale

Screenshot-to-Code est un outil open source qui utilise l'intelligence artificielle pour convertir des captures d'écran, des ébauches de conception et des conceptions Figma en un code propre et fonctionnel. L'outil prend en charge plusieurs piles de technologies frontales, notamment HTML, Tailwind CSS, React et Vue. Il utilise GPT-4 Vision et Claude Modèles d'IA avancés tels que Sonnet 3.5 pour générer du code et aide à la conversion de vidéos ou d'enregistrements d'écran en prototypes fonctionnels.

Liste des fonctions

• Capture d'écran vers codeLes services de l'entreprise : Convertir les captures d'écran et les conceptions en code HTML, Tailwind CSS, React ou Vue.
• De la vidéo au prototype: Convertir une vidéo ou un enregistrement d'écran en un prototype fonctionnel. (fonctionnalité expérimentale)
• Prise en charge de piles technologiques multiplesPrise en charge de HTML, Tailwind CSS, React, Vue, Bootstrap et Ionic.
• Soutien aux modèles d'IAGénération de codes à l'aide de GPT-4 Vision et Claude Sonnet 3.5.
• Test en ligneLes utilisateurs peuvent ainsi tester les fonctionnalités de l'outil en temps réel.

Utiliser l'aide

Processus d'installation

1. entrepôt de clonesExécution dans un terminal git clone https://github.com/abi/screenshot-to-code.git Entrepôt de clonage.
2. Installation des dépendancesAprès être entré dans le répertoire du projet, exécutez cd backend && poetry install Installez les dépendances du backend, exécutez cd frontend && yarn Installer les dépendances frontales.
3. Configuration des clés API: Créer l'espace de travail .env ajoutez la clé de l'API OpenAI et Anthropique Clé API.

   OPENAI_API_KEY=sk-your-key
   ANTHROPIC_API_KEY=your-key
   

4. backend d'amorçage: Run poetry run uvicorn main:app --reload --port 7001 Démarrer le service back-end.
5. Lancement du front-end: Run yarn dev Démarrez le service frontal et ouvrez un navigateur pour accéder à http://localhost:5173.

Processus d'utilisation

1. Télécharger une capture d'écranLes utilisateurs peuvent également télécharger des captures d'écran ou des dessins à convertir dans l'interface frontale.
2. Sélection d'une pile technologiqueSélectionnez la pile technologique (par exemple, HTML, Tailwind CSS, React ou Vue) à partir de laquelle le code doit être généré.
3. Générer le codeCliquez sur le bouton Générer et l'outil utilisera le modèle d'IA pour générer le code frontal correspondant.
4. Visualisation et modification du codeLe code généré sera affiché dans l'interface et l'utilisateur pourra le visualiser et le modifier.
5. Télécharger le codeUne fois satisfait, l'utilisateur peut télécharger le fichier de code généré.

Fonction Opération Déroulement

1. Capture d'écran vers code: :
   • Téléchargez une capture d'écran ou un dessin.
   • Sélectionnez la pile technologique pour laquelle vous devez générer du code.
   • Cliquez sur le bouton Générer et attendez que le modèle d'IA génère le code.
   • Visualiser, modifier et télécharger le code généré.
2. De la vidéo au prototype: :
   • Télécharger une vidéo ou un fichier d'enregistrement d'écran.
   • L'outil analysera automatiquement le contenu de la vidéo et générera un prototype fonctionnel.
   • Visualiser, modifier et télécharger le code du prototype généré.
3. Prise en charge de piles technologiques multiples: :
   • Après avoir téléchargé une capture d'écran ou une vidéo, sélectionnez la pile technologique souhaitée.
   • L'outil prend en charge plusieurs piles technologiques telles que HTML, Tailwind CSS, React, Vue, Bootstrap et Ionic.
4. Soutien aux modèles d'IA: :
   • L'outil génère du code en utilisant des modèles d'IA avancés tels que GPT-4 Vision et Claude Sonnet 3.5.
   • L'utilisateur peut sélectionner le modèle d'IA à utiliser dans les paramètres.