diff --git a/README.md b/README.md index a017ed4..4b681b1 100644 --- a/README.md +++ b/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-4 Vision (Nov 2023) - Good model that's better than GPT-4 Turbo on some inputs -- Claude 3 Sonnet - Faster, and on par or better than GPT-4 vision for many inputs +- GPT-4O - Best model! +- GPT-4 Turbo (Apr 2024) +- GPT-4 Vision (Nov 2023) +- Claude 3 Sonnet - DALL-E 3 for image generation See the [Examples](#-examples) section below for more demos. diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6b04f59..c00df36 100644 --- a/frontend/src/App.tsx +++ b/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) { )} + {showGpt4OMessage && ( +
+ Now supporting GPT-4o. Higher quality and 2x faster. Give it a + try! +
+