Artificial Intelligence

OpenAI model codex in github autopilot generates html website case study

male avatar

taher

Published On : 2022-07-05
blog header

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

Comments

No Comments Yet

About Us

We are Saify technologies a software development company located in india . Who develops custom Web , Mobile applications. We are specialized in Artificial intelligence technology. We have completed many projects on ecommerce with many different technology stacks which includes JAVA, Flutter , PHP, Python , C#,Swift and many more