Gemini 1.5 Flash, UI to Code 👨‍💻
Made by Skirano. Refinded and Hosted by Artples
Choose an image...

Drag and drop file here
Limit 200MB per file • JPG, JPEG, PNG
1001784059.jpg
218.0KB

0
Uploaded Image.

🧑‍💻 Looking at your UI...

The UI is a portrait of a young woman with dark hair. She is wearing a black t-shirt [t-shirt (312, 77, 852, 986)] with a white print on the front. The print is a bit blurry but appears to say "wild" in cursive writing. The woman is also wearing green pants [pants (678, 0, 998, 999)]. She is sitting with her right arm resting on her chin and her left arm wrapped around her right arm. Her face is turned slightly to the left and she is smiling. The background is a bright blue [background (0, 0, 999, 999)]. The woman has brown eyes and a light complexion. Her hair is pulled back from her face. Her smile is genuine and her eyes are bright. The overall tone of the image is positive and cheerful.

🔍 Refining description with visual comparison...

The UI is a portrait of a young woman with dark brown hair [hair (18, 285, 408, 934)]. She is wearing a black t-shirt [t-shirt (306, 76, 869, 987)] with a white print on the front. The print is a bit blurry but appears to say "wild" in cursive writing. The woman is also wearing green pants [pants (682, 0, 999, 999)]. She is sitting with her right arm resting on her chin and her left arm wrapped around her right arm. Her face is turned slightly to the left and she is smiling. The background is a bright blue [background (0, 0, 999, 999)]. The woman has brown eyes and a light complexion. Her hair is pulled back from her face. Her smile is genuine and her eyes are bright. The overall tone of the image is positive and cheerful.

The initial description of the UI is accurate, but the bounding box for the pants is slightly off. The pants actually extend higher than the initial description, so the bounding box should be updated to [pants (677, 0, 999, 999)].
The color of the elements is accurate: the t-shirt is black, the pants are green, the background is blue, and the woman's eyes are brown.
The UI elements are all clearly visible and well-defined. The image is well-lit and the woman's facial features are easily recognizable. The overall composition of the image is pleasing and the colors are harmonious.

🛠️ Generating website...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #00bfff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 400px;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        img {
            width: 100%;
            max-width: 300px;
            border-radius: 10px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://i.imgur.com/y2B7C96.jpg" alt="Portrait of a young woman">
    </div>
</body>
</html>

🔧 Refining website...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #00bfff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            max-width: 350px;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        img {
            width: 100%;
            max-width: 300px;
            border-radius: 10px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        @media (max-width: 350px) {
            .container {
                max-width: 90%;
            }

            img {
                max-width: 90%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://i.imgur.com/y2B7C96.jpg" alt="Portrait of a young woman">
    </div>
</body>
</html>

HTML file 'index.html' has been created.