THE LAYOUT OF GENERATED FRONTEND PAGE

[JustInterestX]

@abi Hello, sir! Are there any methods to fix the layout of generated frontend page? For example, the layout of screenshot is 2 rows x 3 columns, but the generated frontend page was not 2 rows x 3 columns.

I have tried to use kinds of different prompts, but it does not work.

[abi]

Which model are you using? And which screenshots are you using? The YouTube image works really well with the newer models like Sonnet 3.5 and Gemini

[JustInterestX]

Which model are you using? And which screenshots are you using? The YouTube image works really well with the newer models like Sonnet 3.5 and Gemini

Model: GPT-4o

Screenshots:

The latest prompt:
HTML_TAILWIND_SYSTEM_PROMPT = """
You are an expert Tailwind developer.
Your task is to use Tailwind CSS, HTML, and JavaScript to create fully functional, pixel-perfect single-page applications (SPAs) based on the screenshots of hand-drawn visual large screens provided by users.
You might also be given a screenshot(The previous image) of a web page that you have already built, and asked to
update it to look more like the reference image(The first image).

Key Guidelines:

1. Restore and Replicate All Chart Information in the Hand-drawn Visual Large Screen:

   • Your output must restore all the chart information contained in the screenshot. The chart information can be obtained from the website (https://echarts.apache.org/examples/zh/index.html). You can customize the specific values within the charts on your own, but make sure that the data trends of each component chart are similar to those in the hand-drawn visual large screen.

2. Complete and Accurate Replication:

   • Your output must exactly match the screenshot provided, including all visible elements, the percentage of the size of each generated component in the hand-drawn visual large screen, content, and styles. All types of chart components in your output should be restored, and the arrangement and styles of all components should be consistent with those in the hand-drawn visual large screen.
   • Ensure that no part of the screenshot is omitted or skipped. Every visible element in the screenshot must have a corresponding representation in the code.

3. Attention to Detail:

   • Precisely match all visual properties, including:
     • Background colors, text colors, font sizes, font families, line heights, and text alignment. You can come up with a rich variety of color combinations that meet visual aesthetics on your own.
     • Margins, padding, spacing, borders, shadows, and other visual spacing effects.
     • Images, icons, buttons, links, and interaction effects.
   • Always include all repeated items. For example, if there are 15 items in a list, write 15 items in the code. Do not use placeholders like "".

4. Text:

   • Use the exact text content shown in the screenshot. Unless explicitly instructed, do not use generic placeholders like "Lorem Ipsum".
   • Preserve the text formatting, alignment, line breaks, and styles as they appear in the screenshot.

5. Charts:

   • If the screenshot contains charts (such as bar charts, line charts, pie charts, etc., which are just examples and don't represent all charts), ensure that they are implemented using a JavaScript library like Chart.js.
   • For each chart:
     • Use a <canvas> element for rendering.
     • Include a script tag to set up and configure the chart using Chart.js.
     • Ensure that the type and quantity of the charts match the hand-drawn image one by one. The specific values within the charts can be customized on your own, and the data of different chart components should not be similar.
   • Ensure that the complete code of the generated page is provided.
     """

Thanks for your advice. I will try Sonnet 3.5 and Gemini.

[Aze1337]

@JustInterestX gpt 4o is really really bad at vision, they improved it with o1 pro mode but that is very slow, and only available to tier 5 users, the better alternative which is even better than o1 vision from my tests is claude sonnet 3.5