- .NET 9 SDK
- Install the following NuGet Packages
- Microsoft.Extensions.AI.AzureAIInference
- Microsoft.Extensions.AI
- Azure.Identity
- GitHub Personal Access Token
What the input source image looks like
This is what the generated HTML page looks like
Created
November 26, 2024 20:25
-
-
Save luisquintanilla/21143f1316f2945ed95aed44d242bdba to your computer and use it in GitHub Desktop.
AI WebPage Builder
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Atlas Jekyll Theme</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| margin: 0; | |
| display: flex; | |
| background-color: #2c3e50; | |
| color: #ecf0f1; | |
| } | |
| .sidebar { | |
| width: 250px; | |
| background-color: #34495e; | |
| padding: 20px; | |
| } | |
| .sidebar h1 { | |
| font-size: 24px; | |
| margin: 0; | |
| } | |
| .sidebar h2 { | |
| font-size: 18px; | |
| margin: 10px 0; | |
| } | |
| .sidebar a { | |
| color: #ecf0f1; | |
| text-decoration: none; | |
| display: block; | |
| margin: 5px 0; | |
| } | |
| .content { | |
| flex: 1; | |
| padding: 20px; | |
| } | |
| .content h2 { | |
| color: #e74c3c; | |
| margin: 20px 0 10px; | |
| } | |
| .content p { | |
| margin: 0 0 20px; | |
| } | |
| .footer { | |
| text-align: right; | |
| margin-top: 20px; | |
| } | |
| @media (max-width: 600px) { | |
| .sidebar { | |
| width: 100%; | |
| padding: 10px; | |
| } | |
| .content { | |
| padding: 10px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="sidebar"> | |
| <h1>Atlas Jekyll Theme</h1> | |
| <h2>Jekyll</h2> | |
| <p>A jekyll theme for personal website</p> | |
| <a href="#">About</a> | |
| <a href="#">Blogs</a> | |
| <a href="#">RSS feed</a> | |
| </div> | |
| <div class="content"> | |
| <h1>My Latest Blogs</h1> | |
| <div> | |
| <h2>Resources I use</h2> | |
| <p>04 November 2020</p> | |
| <p>I use a wide variety of ideas, tools and other resources that can be helpful. Below is a collection of links to some of the most popular resources and tools that I use.</p> | |
| </div> | |
| <div> | |
| <h2>Whack A Mole Tutorial</h2> | |
| <p>04 November 2020</p> | |
| <p>This is not a tutorial</p> | |
| </div> | |
| <div> | |
| <h2>Pause Menu Tutorial</h2> | |
| <p>03 November 2020</p> | |
| <p>So today we are going to be making pause menus in unity.</p> | |
| </div> | |
| <div> | |
| <h2>Mouse Cursor Follow Tutorial</h2> | |
| <p>03 November 2020</p> | |
| <p>So today we are going to be making an object follow the mouse cursor in unity.</p> | |
| </div> | |
| <div> | |
| <h2>Custom Mouse Cursor Tutorial</h2> | |
| <p>03 November 2020</p> | |
| <p>So today we are going to be making custom mouse cursor in unity.</p> | |
| </div> | |
| <div class="footer"> | |
| <a href="#">Fork me on GitHub</a> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| using Microsoft.Extensions.AI; | |
| using Azure.AI.Inference; | |
| using Azure; | |
| using ChatRole = Microsoft.Extensions.AI.ChatRole; | |
| IChatClient client = | |
| new ChatCompletionsClient( | |
| endpoint: new Uri("https://models.inference.ai.azure.com"), | |
| new AzureKeyCredential(Environment.GetEnvironmentVariable("GH_TOKEN"))) | |
| .AsChatClient("gpt-4o-mini"); | |
| // var filePaths = Directory.GetFiles(@"C:\Dev\AIBookMarksHats\data"); | |
| var systemPrompt = | |
| """ | |
| You are an AI assistant that is a seasoned web developers. | |
| Using an screenshot of a web page, you help users generate the HTML, CSS, and JS code for that page. | |
| The HTML you produce should be: | |
| - Accessible | |
| - No external dependencies (bootstrap, etc.) | |
| - Responsive for mobile and desktop | |
| """; | |
| var messages = new List<ChatMessage> | |
| { | |
| new ChatMessage(ChatRole.System, systemPrompt), | |
| new ChatMessage(ChatRole.User, new AIContent[] { | |
| new ImageContent("https://raw.githubusercontent.com/NrdyBhu1/atlas-jekyll-theme/main/atlas-normal.png", "image/jpeg"), | |
| new TextContent("Using this screenshot, please generate the HTML, CSS, and JS code required to recreate this page."), | |
| }) | |
| }; | |
| var generatedCode = await client.CompleteAsync<Code>(messages, options: new ChatOptions {Temperature = 0.1f}); | |
| var code = generatedCode.Result; | |
| // Add response to messages | |
| messages.Add(new ChatMessage(ChatRole.System, new AIContent[] { | |
| new TextContent("Here is the code I generated for you:"), | |
| new TextContent("HTML:"), | |
| new TextContent(code.HTML), | |
| new TextContent("CSS:"), | |
| new TextContent(code.CSS), | |
| new TextContent("JS:"), | |
| new TextContent(code.JS), | |
| })); | |
| messages.Add(new ChatMessage(ChatRole.User, "Format code as single HTML file. Only include the HTML, CSS, and JS code in your response. Don't include any instructions, commentary, or markdown formatting.")); | |
| // Create single HTML file | |
| var html = await client.CompleteAsync(messages, options: new ChatOptions {Temperature = 0.1f}); | |
| File.WriteAllText("index.html", html.Message.Text); | |
| class Code | |
| { | |
| public string HTML {get;set;} | |
| public string CSS {get;set;} | |
| public string JS {get;set;} | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment