死ぬほど早い生成AI、groq誕生
ここで利用できるのでぜひ体験してみてください。コードも書けます。
この対話型AIは元GoogleエンジニアJonathan Ross氏が2016年に創業したスタートアップgroqによって作られました。qはコンピューティングコスト〝ゼロ〟を目指すAIチップスタートアップとの事です。チップ開発のためにAIを使用してフォーパマンスを測定するための、AIは副産物なのではないかと思われます。
創業時の記事がここにありますので共有します。
このような面々で運営されています
about us をみると、Jonathan Ross氏をはじめ、数名の元Google社員などがいます。噂されていたDeepMindから独立して作られたスタートアップとの関連もあるかもしれません。
1秒でhtmlとcssだけでハンバーガーメニューを書いた
修正はなかなかできなせんでしたが。jsを使わないハンバーガーメニューのhtmlとcssを1秒で書いてしまいました。
残念なことに動きませんでしたが。修正依頼をかけ、すぐに手直ししてコードを書き直しましたが、全くコードは修正されていませんでした。
うごかない理由を教えてあげたがそれを理解しなかった
問題はわかっていて、クリックすべきものを最初っから非表示にしてるんですよ。こんな感じで。
#menu-toggle {
display: none;
}なので、そこを指摘したのですが、何度書き直させても謝りながら修正しませんでした。
日本語もわかるとの事だったので痺れを切らして日本語でも言いましたがだめでした。その都度コードを書き直すのですが肝心な場所の修正をしませんでした。
仕方がないのでChatGPTに修正してもらった
ChatGPTはゆっくり書きますが、問題を特定してしっかり修正してきます。Groqのコードを修正した過程は下記のURLで公開しておきます。
もしフロントエンドに関わっている人なら興味があると思うので、下記にGroqの元コードを、続いてChatGPTの修正コードを掲載しておきます。
Groqが１秒で書いたhtmlとcss
本当に目にもとまらぬ速さでかきます。ですが修正を依頼していくとどんどん遅くなり、5回目ではものすごく遅くなりました。しかも一度も修正できませんでした。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Hamburger Menu Example</title>
<link rel="stylesheet" type="text/css" href="groq.css">
</head>
<body>
<div class="hamburger-menu">
<input id="menu-toggle" type="checkbox" />
<span></span><span></span><span></span>
<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</div>
</body>
</html>
groq.css
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.hamburger-menu {
position: relative;
width: 100%;
height: 60px;
background-color: #333;
display: flex;
justify-content: flex-end;
align-items: center;
}
#menu-toggle {
display: none;
}
.hamburger-menu span {
position: absolute;
right: 20px;
width: 30px;
height: 4px;
background-color: #fff;
margin: 5px 0;
border-radius: 5px;
transition: all 0.4s ease;
}
.hamburger-menu span:nth-child(2) {
opacity: 0.5;
transform: translateY(8px);
}
.hamburger-menu span:nth-child(3) {
opacity: 0.5;
transform: translateY(-8px);
}
#menu-toggle:checked ~ span {
transform: rotate(45deg);
}
#menu-toggle:checked ~ span:nth-child(2) {
opacity: 0;
}
#menu-toggle:checked ~ span:nth-child(3) {
transform: rotate(-45deg);
}
.hamburger-menu .menu {
position: absolute;
top: 60px;
right: 0;
background-color: #333;
width: 100%;
height: 100vh;
transform: translateX(100%);
transition: all 0.4s ease;
}
#menu-toggle:checked ~ .menu {
transform: translateX(0);
}
.hamburger-menu a {
display: block;
padding: 20px;
color: #fff;
text-decoration: none;
}
.hamburger-menu a:hover {
background-color: #444;
}
ChatGPTがすぐに解決したコード
問題の箇所は、<input id="menu-toggle" type="checkbox" />が非表示になるためクリックできないというものだったのに、<input id="menu-toggle" type="checkbox" />はそのまま非表示にしておき、<label for="menu-toggle">を制作してその中にハンバーガーの３本線を入れ込むという離れ技をしました。ChatGPT賢い。
CSSに関しては、#menu-toggleに対するdisplay: none;の指定以外に変更する必要はありません。label要素とその内部のspan要素によって視覚的な表現が行われ、ユーザーはこのlabelをクリックしてメニューの表示状態を切り替えることができます。
その後、３本線の置かれている位置の調整を何度か一緒にして完成した「３本線をクリックすると右からドロアーメニューがでてくる」ハンバーガーメニューがこちらです。
この記事が気に入ったらサポートをしてみませんか？