OpenAI model codex in github autopilot generates html website case study
What is an OpenAI codex model?
It is a model of an artificial intelligence system that can generate high-quality programming code based on the context of source code.
OpenAI codex model is trained on github's repository.
codex model has a high performance among the other models available and can identify the necessary functions, methods, and the names of variables
It performs poorly for the large and lengthy code
Where codex model is used right now ?
Codex model is used right now in github copilot plugin . It is trained on billions lines of code from github . It was release in beta version in july 2021 and now it is paid for 10$ per month per user.
Githubs copilot case study for generation of html website?
For seeing the power of copilot we have put comment in html in start . And comments on css for each tab . To our surprise copilot made following website for us . We have asked copilot to make "simple static html website for our IT company " . And see what copilot made for us .
This is code from HTML which is generated by copilot with comments written above
This is code for css generated by copilot with comments given
<!DOCTYPE html><html lang="en"> <!--header with full web url for designing custom software development with about section , testimony section landing page -->
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Software Development</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> <link href="style.css" rel="stylesheet"> </head>
<body> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top"> <a class="navbar-brand" href="#"><img src="images/logo.png"></a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link" href="services.html">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact</a> </li> </ul> </div> </nav> </div> </div> </div> <div class="container-fluid padding"> <div class="row welcome text-center"> <div class="col-12"> <h1 class="display-4">Software Development</h1> </div> <hr> </div> </div> <div class="container-fluid padding"> <div class="row padding"> <div class="col-md-6"> <img src="images/software.jpg" class="img-fluid"> </div> <div class="col-md-6"> <h2>Software Development</h2> <p>Software development is the process of conceiving, specifying, designing, programming, documenting, testing, and debugging an application, system, or digital work so that it produces some desired result. </p> <p>Software development is the process of conceiving, specifying, designing, programming, documenting, testing, and debugging an application, system, or digital work so that it produces some desired result. </p> <p>Software development is the process of conceiving, specifying, designing, programming, documenting, testing, and debugging an application, system, or digital work so that it produces some desired result. </p> </div> </div> </div> <div class="container-fluid padding"> <div class="row padding"> <div class="col-md-6"> <h2>Software Development</h2> <p>Software development is the process of conceiving, specifying, designing, programming, documenting, testing, and debugging an application, system, or digital work so that it produces some desired result. </p> <p>Software development is the process of conceiving, specifying, designing, programming, documenting, testing, and debugging an application, system, or digital work so that it produces some desired result. </p> <p>Software development is the process of conceiving, specifying, designing, programming, documenting, testing, and debugging an application, system, or digital work so that it produces some desired result. </p> </div> <div class="col-md-6"> <img src="images/software2.jpg" class="img-fluid"> </div> </div>
</div> <div class="container-fluid padding"> <div class="row padding"> <div class="col-md-6"> <img src="images/software3.jpg" class="img-fluid"> </div> <div class="col-md-6"> <h2>Software Development</h2> <p>Software development is the process of conceiving, specifying, designing, programming, documenting, testing, and debugging an application, system, or digital work so that it produces some desired result. </p> <p>Software development is the process of conceiving, specifying, designing, programming, documenting, testing, and debugging an application, system, or digital work so that it produces some desired result. </p> <p>Software development is the process of conceiving, specifying, designing, programming, documenting, testing, and debugging an application, system, or digital work so that it produces some desired result. </p> </div> </div>
</div>
<div class="container-fluid padding"> <div class="row text-center padding"> <div class="col-12"> <h2>Connect</h2> </div>
<div class="col-12 social padding"> <a href="#"><i class="fab fa-facebook"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-google-plus-g"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-youtube"></i></a> </div> </div> </div> <div class="container-fluid padding"> <div class="row padding"> <div class="col-md-4"> <img src="images/logo.png" class="img-fluid"> <hr class="light"> <p>555-555-5555</p> <p>
</p> </div> <div class="col-md-4"> <h2>Contact Us</h2> <hr class="light"> <p>555-555-5555</p> <p>
</p> </div>
<div class="col-md-4"> <h2>Address</h2> <hr class="light"> <p>555-555-5555</p> <p>
</p> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script></body>
</html>
Full code can be accesed on github repo URL
And dont forget to subscribe to our github account to get more code for github copilot
Leave a Comment
No Comments Yet