Merge branch 'main' into hosted

README.md

@@ -1,6 +1,6 @@
 # screenshot-to-code
 
-A simple tool to convert screenshots, mockups and Figma designs into clean, functional code using AI.
+A simple tool to convert screenshots, mockups and Figma designs into clean, functional code using AI. **Now supporting GPT-4O!**
 
 https://github.com/abi/screenshot-to-code/assets/23818/6cebadae-2fe3-4986-ac6a-8fb9db030045
 
@@ -15,9 +15,10 @@ Supported stacks:
 
 Supported AI models:
 
-- GPT-4 Turbo (Apr 2024) - Best model
+- GPT-4O - Best model!
-- GPT-4 Vision (Nov 2023) - Good model that's better than GPT-4 Turbo on some inputs
+- GPT-4 Turbo (Apr 2024)
-- Claude 3 Sonnet - Faster, and on par or better than GPT-4 vision for many inputs
+- GPT-4 Vision (Nov 2023)
+- Claude 3 Sonnet
 - DALL-E 3 for image generation
 
 See the [Examples](#-examples) section below for more demos.

frontend/src/App.tsx

@@ -100,6 +100,10 @@ function App({ navbarComponent }: Props) {
       CodeGenerationModel.GPT_4_TURBO_2024_04_09 &&
     settings.generatedCodeConfig === Stack.REACT_TAILWIND;
 
+  const showGpt4OMessage =
+    selectedCodeGenerationModel !== CodeGenerationModel.GPT_4O_2024_05_13 &&
+    appState === AppState.INITIAL;
+
   // Indicate coding state using the browser tab's favicon and title
   useBrowserTabIndicator(appState === AppState.CODING);
 
@@ -435,6 +439,15 @@ function App({ navbarComponent }: Props) {
             </div>
           )}
 
+          {showGpt4OMessage && (
+            <div className="rounded-lg p-2 bg-fuchsia-200">
+              <p className="text-gray-800 text-sm">
+                Now supporting GPT-4o. Higher quality and 2x faster. Give it a
+                try!
+              </p>
+            </div>
+          )}
+
           {appState !== AppState.CODE_READY && <TipLink />}
 
           {IS_RUNNING_ON_CLOUD &&

frontend/src/lib/models.ts

@@ -15,7 +15,7 @@ export const CODE_GENERATION_MODEL_DESCRIPTIONS: {
     isPaid: boolean;
   };
 } = {
-  "gpt-4o-2024-05-13": { name: "GPT-4O 🌟", inBeta: false, isPaid: false },
+  "gpt-4o-2024-05-13": { name: "GPT-4o 🌟", inBeta: false, isPaid: false },
   "gpt-4-turbo-2024-04-09": {
     name: "GPT-4 Turbo (Apr 2024)",
     inBeta: false,