AI Programmer(日本語で指示を出すだけでコードを自動生成)がすごい

Twitterで話題になっていた日本語で指示を出すだけでコードを自動生成してくれる『AI Programmer』。

AI Programmer

現在プロトタイプが無料で公開されていて、言語を選択してAI Programmerに書かせたいコードの処理内容を入力するだけで、コードを自動生成してくれます。

HTML ＆ CSS を試してみた
- AI Programmerでトップへ戻るボタンを作ってみた
- AI Programmerでグローバルナビを作ってみた結果
AI Programmerを使ってみた感想

対応している言語は

SQL
Python
JavaScript
HTML ＆ CSS
Solidity
C++
PHP
Go
R
Perl
Ruby
正規表現
Haskell
Lisp
C#
Lisp

HTML ＆ CSS を試してみた

面白そうなので早速試してみましょう。

AI Programmerでトップへ戻るボタンを作ってみた

「HTML ＆ CSS」を選択して『HTMLとCSSだけでトップへ戻るのボタンを作って』と入力してみた結果がこちら。

表示されたHTMLとCSS

<a href="#" class="back-to-top">Back to Top</a>

.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
cursor: pointer;
transition: all 0.3s ease-in-out;
}

.back-to-top:hover {
background-color: #777;
}

AI Programmerで作った「トップへ戻るボタン」のコードを実際にHTMLに書き出してみたのがこちら。

少しゆっくり戻るようにtransition: all 0.3s ease-in-outのアニメーションがつけられていて、問題なく動きます。

AI Programmerでグローバルナビを作ってみた結果

グローバルナビもできるかどうか試してみました。

<!DOCTYPE html>
<html>
<head>
<style>
#globalnav {
width: 100%;
height: 50px;
background-color: #333;
}
#globalnav ul {
list-style: none;
margin: 0;
padding: 0;
}
#globalnav li {
float: left;
}
#globalnav a {
display: block;
padding: 0 20px;
line-height: 50px;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>

<div id="globalnav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

</body>
</html>