Hi folks,
I’m trying to use Codex to generate HTML with CSS utility. I can’t get it to generate complete HTML blocks. It is either gives me HTML code that is mixed with some other language or incomplete HTML blocks.
Any idea what prompt is useful to get started with this or other useful related prompts?
Thanks in advance,
Ravin.
Hi @m-a.schenk,
Ya, pretty much. In this case I’m thinking if it can generate with a specific start tag and end tag, and without mixing other language (Like php tags).
But it seems to me it is more easier to generate Javascript code that generates html, than html directly.
Codex wrote a whole HTML code for me and it’s so awesome.
I can show how you can use VSCode Copilot extension with davinci-codex.
Quite the same problem i faced but solved by clearly mentioning that “Write html code” then after that i write what i want.
try initializing with an HTML style comment:
<!-- Bootstrap light gray navigation bar with google's logo -->
Hi @bakztfuture,
Thank you for the answer. This works, but I don’t know how folks set the response length.(Or current best practice around this). After a while, the HTML comment tag is repeated(I had to cancel it in the playground to stop), seems like quite a lot of cleaning needs to be done for every generated code.
Engine: davinci-codex
Response length: 1070
Temperature: 0
<!-- Bootstrap light gray navigation bar with google's logo -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">
<img src="images/logo.png" alt="logo" class="img-responsive">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.php">Login</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Bootstrap light gray navigation bar with google's logo -->
<!-- Bootstrap light gray navigation bar with google's logo -->
<!-- Bootstrap light gray navigation bar with google's logo -->
<!-- Bootstrap light gray navigation bar with google's logo -->
<!-- Bootstrap light gray navigation bar with google's logo -->
<!-- Bootstrap light gray navigation bar with google's logo -->
<!-- Bootstrap light gray navigation bar with google's logo -->
<!-- Bootstrap light gray navigation bar with google's logo -->
<!-- Bootstrap light gray navigation bar with google's logo -->
<!-- Bootstrap light gray navigation bar with google's logo -->
<!-- Bootstrap light gray navigation bar with google's logo -->
Thanks,
Ravin
try setting the stop sequences to stop it from repeating itself:
I try to take the approach of letting it retry a few possibilities and picking the one I like with the least amount of editing. For basic HTML, the other alternative too is to just use github copilot instead which probably will have the accuracy/time saving you’re looking for right inside your code editor.
I think I know how to make it work. Just tested it, I can overwrite a template(Add class, remove and add components) and move around components in a template with the correct prompt.
Thank you all for your answers and guidance.
When writing prompts always use the syntax used for comments according to the language you’re using.Javascript is // for single line comments and /**/ for multiple line comments. Python is # for single line comments and “”" “”" for multiple line comments. Also the temperature is set to 0 automatically which makes codex repeat itself if you don’t have a stop sequence.