はじめに
この記事はRWKVとChatGPTの出力を比較してみた、という記事です。
LLMの賢さ比較的な話は良くグラフになっているので、あえて自分でやる必要は無いんですが、
自分なりのユースケースに合ったタスクを処理させて、精度の違いを体感してみた、という記事です。
(モデルの優劣を語りたいわけではなく、自分の用途に合う合わないを調査した、ということです。)
検証方法としては、ゼロショットで画一的な指示を出してるだけなので、
各モデルのポテンシャルを正しく引き出せていない方法とも言えます。
今回の目的は各モデルのポテンシャルを引き出すことではなく、
ざっくり流して特徴を俯瞰してみたい、ということなのでこういう雑な検証になっております。
環境は以前作ったこれ↓を使いました。
まとめ
結果を貼ると長いので、いきなりまとめから入ります。
タスクの採点は完全に主観で、大体以下の基準で採点しました。
- 0点:そもそもできない。実行拒否等。
- 10点:なんか書いたけどめっちゃ短いとかで全然ダメ。。
- 30点:なんかそれなりの分量書いたけど内容適当過ぎて全然ダメ。
- 60点:ちょっと手直ししたら動く。
- 80点:及第点(多少のバグはあっても修正無しで動く)
- 100点:人が書くのと同じレベル
No. | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
---|---|---|---|---|---|---|---|
モデル略称 | 7B fp16i8 | 7B fp16 | 14B v7 EAM | 14B v8 EAM | 14B v9 E99%-O1% | Chat-GPT 3.5 | Chat-GPT 4 |
タスク① md表⇒JSON変換 |
20点 | 65点 | 45点 | 70点 | 25点 | 100点 | 90点 |
タスク② I/F ⇒ class変換 |
100点 | 100点 | 60点 | 60点 | 60点 | 100点 | 60点 |
タスク③ 詳細設計書 ⇒ プログラム |
10点 | 10点 | 80点 | 80点 | 80点 | 60点 | 60点 |
タスク④ テトリス作る |
20点 | 5点 | 55点 | 55点 | 30点 | 60点 | 60点 |
合計 | 150点 | 180点 | 240点 | 265点 | 195点 | 320点 | 270点 |
感想
-
No.1,2 : strategyの符号化の影響について
⇒ 大きな差はみられなかったが、やや特徴に差がありそうで要深堀。 -
No.3~5 : バージョンアップによる成長度合いについて
⇒ 明らかにv8の出力が良い。
v7からv8で成長がみられるので、EngAndMore系のv9があれば試したかった。。
v9はEngAndMoreではないので今回のタスクには合わないモデルだったか・・・? -
No.2,5 : 7Bと14Bの差について
⇒ 公式の資料通り、総体としては14Bの方が精度が高そうであった。
ただし、タスク②は7B勢の方が優秀だった。
特に、継承を使っても正確なコードが表現されているなど光る点もあり、
この差異が何なのかは後で調べたい。 -
No 6,7:Chat-GPT
⇒ 今回のタスクだと意外にもGPT4の点数が低くついた。
ポテンシャルとしてはGPT4の方が遥か上なことは周知の事実と思われるので、
これはゼロショットだと今回のタスクに合わなかっただけ、ということだと思われる。
とはいえ、タスク②の変換タスクではtypescriptとしての構文エラーを起こしており、
いかに指示が悪かったとはいえ、
現状最強のLLMがこの程度のタスクでエラーを起こすというのは衝撃的ではあった。
つまり、いかに指示の出し方が大事か、ということを示しているようだった。 -
No 1~7:RWKVとChat-GPTの差異について
⇒ 出力を眺めていて思ったこととしては、
Chat-GPTは常に安定、RWKVは荒々しい(時に無限ループや、単純に破綻する等)。
この違いが結果に大きく響きはしたものの、v8とChat-GPT4ではその差5点と、
合計点で見ると大きな差が無いという結果になった。
まとめると、、
- モデルごとに得意タスク不得意タスクが分かれる傾向が見て取れた。
- Chat-GPTは安定(1度も破綻を起こさなかった)、RWKVは暴れ馬(破綻起こしがちではあった)。
- 指示の出し方次第では GPT4 が負けることもある⇒指示の出し方(プロンプトエンジニアリング?)は大事。
- 裏目的の「RWKVでプログラム大量生産が出来そうか」については、パラメータ調整で精度がかなり変わるので、チューニングや追加学習次第でやりようがあるかもしれないと思えた。
以上です。
以降はファクト集です。
モデル一覧
No. | モデル | strategy |
---|---|---|
1 | RWKV-4-Raven-7B-v9-Eng99%-Other1%-20230412-ctx8192 | fp16i8 |
2 | RWKV-4-Raven-7B-v9-Eng99%-Other1%-20230412-ctx8192 | fp16 |
3 | RWKV-4-Raven-14B-v7-EngAndMore-20230408-ctx4096 | fp16 |
4 | RWKV-4-Raven-14B-v8-EngAndMore-20230408-ctx4096 | fp16 |
5 | RWKV-4-Raven-14B-v9-Eng99%-Other1%-20230412-ctx8192 | fp16 |
6 | ChatGPT 3.5 | - |
7 | ChatGPT 4 | - |
※RWKVは全て TOP_P=0.2 で実施しました。
タスク設定
タスク1:MD表形式をjson形式に
タスク設定の意図
MD表形式で正規化されている情報なので、いわゆる普通のプログラムで処理すればいいじゃん、
という話はありますが、LLMに対してMD表を読み込ませて正しく解釈できているのか?
というのを確認したいのでこのタスクをやらせてます。
+i Please convert to JSON foramt.
|API ID|service.method|
|-|-|
|AUTH01|AuthServiceInterface.register|
|AUTH02|AuthServiceInterface.login|
|AUTH03|AuthServiceInterface.logout|
|AUTH04|AuthServiceInterface.resetPassword|
|USR01|UserServiceInterface.getUser|
|USR02|UserServiceInterface.updateUser|
|USR03|UserServiceInterface.getNotificationSetting|
|USR04|UserServiceInterface.updateNotificationSetting|
感想
model | Good | Bad |
---|---|---|
7B fp16i8 | - 50%(4/8)は正しい構造が出力される | - ゴミプロパティが大量発生。 - UserServiceが無い |
7B fp16 | - mdethodの取りこぼしは無く、全て挙がっている。 | - キー重複が起きていてJSONとしては構文エラー - AuthとUserで構造が統一されていない。 |
14B v7 | - mdethodの取りこぼしは無く、全て挙がっている。 | - キー重複が起きていてJSONとしては構文エラー - Userとすべきところが全部Authになっている。 |
14B v8 | - mdethodの取りこぼしは無く、全て挙がっている。 - サービスとメソッドの組み合わせも正しい。 |
- ゴミプロパティが大量発生。 - 大外の配列枠が無く、JSONとしては構文エラー |
14B v9 | - 挙がっている構造は正確。 | - ゴミプロパティが大量発生。 - 最後破綻してしまった。 |
Chat-GPT 3.5 | - MD表の構造がそのあま正確に展開されている。 - サービスとメソッドが正しく分割されている。 |
|
Chat-GPT 4 | - 構造は正しく展開されている。 | - クラス名の重複定義が冗長。 |
タスク2:インターフェースをクラスに変換
タスク設定の意図
これも先ほどとほぼ同じ目的。表ではなくインターフェースのソースコードで型情報として注入して、正しく解釈できるかのテスト。
+i Convert to class with constructor. In the shortest code.
export interface User {
id: number;
email: string;
password: string;
display_name: string;
created_at: string;
updated_at: string;
}
感想
model | Good | Bad |
---|---|---|
7B v9 fp16i8 | - classは最短コードで適切に書かれている。 | - 「変換」を依頼したのに継承になっている。継承元も表現されているので間違いではないが、、 |
7B v9 fp16 | - 正解。人でもこう書く人はいる。 | - (最短コードではないという意味で)やや冗長。 |
14B v8 | - javascriptとしては正解の最短コード。 | - typescriptにして欲しかった。 - exportが消えた。 |
14B v8 | - javascriptとしては正解の最短コード。 | - typescriptにして欲しかった。 - exportが消えた。 |
14B v9 | - javascriptとしては正解の最短コード。 | - typescriptにして欲しかった。 - exportが消えた。 |
Chat-GPT 3.5 | - 完璧。正確、最短コード。 | |
Chat-GPT 4 | - 構造は正確 | - プロパティ宣言部が書かれていないためtypescriptとしては構文エラー。 |
タスク3:詳細設計書からコーディング ※日本語部分は英語にしてから投入しました。
タスク設定の意図
手続きの注入がうまくできるか。自然言語でプログラムに落とせるかどうかのテスト。
+i ## LoginPageの画面項目一覧
- メールアドレス入力欄
- パスワード入力欄
- ログインボタン
- パスワードリセットリンク
## LoginPageの画面変数一覧
- email: string
- password: string
## LoginPageのメソッド一覧(処理概要)
### onLogin()
- 入力されたメールアドレスとパスワードをAuthServiceのlogin()メソッドに渡し、認証を試みる。
- 認証が成功したら、取得したトークンをLocalStorageに保存し、DashboardPageに遷移する。
- 認証が失敗したら、エラーメッセージを表示する。
### onPasswordResetRequest()
- 入力されたメールアドレスをAuthServiceのresetPassword()メソッドに渡し、パスワードリセット用のメールを送信する。
- 送信が成功したら、PasswordResetConfirmationPageに遷移する。
- 送信が失敗したら、エラーメッセージを表示する。
## LoginPageで利用するサービス
### AuthService
- API ID: AUTH01, AUTH04
- メソッド:
- login(email: string, password: string): Observable<{ token: string }>
- resetPassword(email: string): Observable<any>
- 入力項目: email(string), password(string)
- 出力項目: Observable<{ token: string }>, Observable<any>
感想
model | Good | Bad |
---|---|---|
7B v9 fp16i8 | - 文法的な破綻は無い | - サービスクラスを作ってしまった。。 - サービスクラスとしても冗長。 |
7B v9 fp16 | - コードの体は成している。 | - サービスクラスを作ってしまった。。 - 同じメソッドが複数回定義されている。 |
14B v7 | - ほぼ正解に近い。 | - パスワードリセット正常終了時の遷移先が誤り。 |
14B v8 | - ほぼ正解に近い。 | - パスワードリセット正常終了時の遷移先が誤り。 |
14B v9 | - ほぼ正解に近い。 | - パスワードリセット正常終了時の遷移先が誤り。 |
Chat-GPT 3.5 | - htmlとts両方書かれている。 | - 画面遷移部分、エラーメッセージ部分がコメント。(タスク意図に合わない) |
Chat-GPT 4 | - htmlとts両方書かれている。 - サービスクラス、モジュールも書かれている |
- 画面遷移部分、エラーメッセージ部分がコメント。(タスク意図に合わない) |
タスク4:テトリス作って
タスク設定の意図
コンテキストの長さ確認。どのくらいまで長いコードを破綻無く書けるのかのテスト。
Chat-GPTでも一発では上手くできないので、ベンチマークにしようかと。
+i As a good programmer, write the following program.\n"Tetris that run on html and javascript".
感想
model | Good | Bad |
---|---|---|
7B v9 fp16i8 | - 文法エラーは無い。 | - 短すぎて体を成していない。 |
7B v9 fp16 | - 最後は無限ループになってしまった。(破綻している) | |
14B v7 | - 破綻無くそれなりの量が書けている。 | - テトリスとしては動かない。 |
14B v8 | - 破綻無くそれなりの量が書けている。 | - テトリスとしては動かない。 |
14B v9 | - 破綻は無い。 - 開くとブロックらしきものが表示はされる。 |
- ちょっとコード量短い |
Chat-GPT 3.5 | - 超長大 | - 結局動かない。 |
Chat-GPT 4 | - 長い。 | - 結局動かない。 |
出力まとめ
No.1 RWKV-4-Raven-7B-v9-Eng99%-Other1%-20230412-ctx8192 fp16i8
No.1 RWKV-4-Raven-7B-v9-Eng99%-Other1%-20230412-ctx8192 fp16i8 MD表形式をjson形式に
{
"APIID": "AuthServiceInterface",
"method": [
{
"service.method": "AuthServiceInterface.register",
"method_params": [
{
"name": "USER",
"type": "User"
}
],
"response": {
"type": "UserResponse",
"success": true,
"message": null,
"error_code": null,
"error_message": null,
"data": null,
"user_id": null,
"user_name": null,
"user_email": null,
"user_phone": null,
"user_avatar": null,
"user_role": null,
"user_roles": [],
"user_roles_count": 0,
"user_roles_data": null,
"user_roles_counts": null,
"user_roles_data_count": null,
"user_roles_data_counts": null,
"user_roles_data_ids": [],
"user_roles_ids": [],
"user_roles_counts_data": null,
"user_roles_counts_data_count": 0,
"user_roles_counts_data_ids": [],
"user_roles_counts_data_ids": [],
"user_roles_counts_data_ids": []
}
},
{
"service.method": [
{
"service.method": "UserServiceInterface.getUser",
"method_params": [
{
"name": "USER",
"type": "User"
}
],
"response": {
"type": "UserResponse",
"success": true,
"message": null,
"error_message": null,
"data": null,
"user_id": null,
"user_name": null,
"user_email": null,
"user_phone": null,
"user_avatar": null,
"user_role": null,
"user_roles": [],
"user_roles_count": 0,
"user_roles_data": null,
"user_roles_counts": [],
"user_roles_data_count": 0,
"user_roles_counts_data": null,
"user_roles_counts_data_count": 0,
"user_roles_counts_data_ids": [],
"user_roles_counts_data_ids": [],
"user_roles_counts_data_ids": [],
"user_roles_counts_data_ids": []
}
}
]
},
{
"service.method": [
{
"service.method": "UserServiceInterface.updateNotificationSetting",
"method_params": [
{
"name": "USER",
"type": "User"
},
{
"name": "notificationSetting",
"type": "NotificationSetting"
}
],
"response": {
"type": "NotificationSettingResponse",
"success": true,
"message": null,
"error_message": null,
"data": null,
"user_id": null,
"user_name": null,
"user_email": null,
"user_phone": null,
"user_avatar": null,
"user_role": null,
"user_roles": [],
"user_roles_count": 0,
"user_roles_data": null,
"user_roles_counts": [],
"user_roles_data_count": 0,
"user_roles_counts_data": null,
"user_roles_counts_data_count": 0,
"user_roles_counts_data_ids": [],
"user_roles_counts_data_ids": [],
"user_roles_counts_data_ids": []
}
}
]
},
{
"service.method": [
{
"service.method": "UserServiceInterface.getNotificationSetting",
"method_params": [
{
"name": "USER",
"type": "User"
}
],
"response": {
"type": "NotificationSettingResponse",
"success": true,
"message": null,
"error_message": null,
"data": null,
"user_id": null,
"user_name": null,
"user_email": null,
"user_phone": null,
"user_avatar": null,
"user_role": null,
"user_roles": [],
"user_roles_count": 0,
"user_roles_data": null,
"user_roles_counts": [],
"user_roles_data_count": 0,
"user_roles_counts_data": null,
"user_roles_counts_data_count": 0,
"user_roles_counts_data_ids": [],
"user_roles_counts_data_ids": [],
"user_roles_counts_data_ids": []
}
}
]
}
]
}
No.1 RWKV-4-Raven-7B-v9-Eng99%-Other1%-20230412-ctx8192 fp16i8 インターフェースをクラスに変換
export interface User {
id: number;
email: string;
password: string;
display_name: string;
created_at: string;
updated_at: string;
}
export class User implements User {
constructor(
public id: number,
public email: string,
public password: string,
public display_name: string,
public created_at: string,
public updated_at: string
) {}
}
No1. RWKV-4-Raven-7B-v9-Eng99%-Other1%-20230412-ctx8192 fp16i8 詳細設計書からコーディング
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})
export class LoginService {
private email: string;
private password: string;
constructor(private http: HttpClient, private authService: AuthService) { }
login(email: string, password: string): Observable<any> {
return this.http.post < any > ('https://api.example.com/login', { email, password });
}
loginWithPasswordReset(email: string, passwordResetToken: string): Observable<any> {
return this.http.post < any > ('https://api.example.com/reset-password', { email, passwordResetToken });
}
loginWithPassword(email: string, password: string): Observable<any> {
return this.http.post < any > ('https://api.example.com/login', { email, password });
}
loginWithPasswordReset(email: string, passwordResetToken: string): Observable<any> {
return this.http.post < any > ('https://api.example.com/password-reset', { email, passwordResetToken });
}
onLogin(): Observable<{ token: string }> {
return this.authService.login(this.email, this.password);
}
onPasswordResetRequest(): Observable<{ token: string }> {
return this.authService.passwordReset(this.email);
}
onPasswordReset(token: string): Observable<any> {
return this.authService.passwordReset(token);
}
onPasswordResetRequest(): Observable<any> {
return this.authService.passwordResetRequest();
}
}
No.1 RWKV-4-Raven-7B-v9-Eng99%-Other1%-20230412-ctx8192 fp16i8 テトリス作って
<html>
<head>
<script>
function rotate(shape, angle) {
shape.style.transform = "rotate(" + angle + "deg)";
}
function rotateAll(shape) {
for (let i = 0; i < shape.children.length; i++) {
rotate(shape.children[i], -angle);
}
}
</script>
</head>
<body onload="rotateAll(document.querySelector('div'), -90)">
<div style="width: 100px; height: 100px; background-color: red;">
</div>
</body>
</html>
No.2 RWKV-4-Raven-7B-v9-Eng99%-Other1%-20230412-ctx8192 fp16
No.2 RWKV-4-Raven-7B-v9-Eng99%-Other1%-20230412-ctx8192 fp16 MD表形式をjson形式に
{
"APIID": "AuthServiceInterface",
"method": [
"AuthServiceInterface.register",
"AuthServiceInterface.login",
"AuthServiceInterface.logout",
"AuthServiceInterface.resetPassword",
"USR01",
"USR02",
"USR03",
"USR04"
],
"method": [
"UserServiceInterface.getUser",
"UserServiceInterface.updateUser",
"UserServiceInterface.getNotificationSetting",
"UserServiceInterface.updateNotificationSetting",
"UserServiceInterface.getNotificationSetting"
]
}
No.2 RWKV-4-Raven-7B-v9-Eng99%-Other1%-20230412-ctx8192 fp16 インターフェースをクラスに変換
export class User {
id: number;
email: string;
password: string;
displayName: string;
createdAt: Date;
updatedAt: Date;
constructor(id: number, email: string, password: string, displayName: string, createdAt: Date, updatedAt: Date) {
this.id = id;
this.email = email;
this.password = password;
this.displayName = displayName;
this.createdAt = createdAt;
this.updatedAt = updatedAt;
}
}
No.2 RWKV-4-Raven-7B-v9-Eng99%-Other1%-20230412-ctx8192 fp16 詳細設計書からコーディング
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';
@Injectable({
providedIn: 'root'
})
export class LoginService {
private email: string;
private password: string;
constructor(private http: HttpClient, private authService: AuthService) { }
login(email: string, password: string): Observable<any> {
return this.http.post < any > ('https://api.example.com/login', { email, password });
}
login(email: string, password: string): Observable<any> {
return this.http.post < any > ('https://api.example.com/login', { email, password });
}
login(email: string, password: string): Observable<any> {
return this.http.post < any > ('https://api.example.com/login', { email, password });
}
login(email: string, password: string): Observable<any> {
return this.http.post < any > ('https://api.example.com/login', { email, password });
}
resetPassword(email: string): Observable<any> {
return this.http.post < any > ('https://api.example.com/reset-password', { email });
}
resetPassword(email: string): Observable<any> {
return this.http.post < any > ('https://api.example.com/reset-password', { email });
}
onLogin(): Observable<{ token: string }> {
return this.authService.login(this.email, this.password);
}
onPasswordResetRequest(): Observable<any> {
return this.authService.resetPassword(this.email);
}
onPasswordResetRequest(): Observable<any> {
return this.authService.resetPassword(this.email);
}
}
No.2 RWKV-4-Raven-7B-v9-Eng99%-Other1%-20230412-ctx8192 fp16 テトリス作って
<!DOCTYPE html>
<html>
<head>
<title>Tetris Game</title>
<style>
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
margin: auto;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Draw the background color and the tetromino shapes.
ctx.fillStyle = "black";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw the tetromino shapes on the canvas.
const tetrominoes = [
"T", "T", "T", "T", "T", "T", "T",
"T", "T", "T", "T", "T", "T", "T",
"T", "T", "T", "T", "T", "T", "T"
];
for (let i = 0; i < tetrominoes.length; i++) {
ctx.fillStyle = tetrominoes[i];
ctx.fillRect(i * 50, 0, 50, 50);
}
// Draw the score and the game over message.
ctx.font = "24px Arial";
ctx.fillStyle = "#000";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText("Score: 0 / 10", canvas.width / 2, canvas.height - 50);
ctx.fillText("Game Over", canvas.width / 2, canvas.height - 100);
// Set the interval to update the game state.
let intervalId = setInterval(() => {
// Update the game state.
const score = Math.floor(Math.random() * 10) + 1;
tetrominoes[Math.floor(Math.random() * tetrominoes.length)] = "T";
tetrominoes[Math.floor(Math.random() * tetrominoes.length)] = "T";
無限ループになりました。
No.3 RWKV-4-Raven-14B-v7-EngAndMore-20230408-ctx4096 fp16
No.3 RWKV-4-Raven-14B-v7-EngAndMore-20230408-ctx4096 MD表形式をjson形式に
{
"API ID": "AUTH01",
"service.method": "AuthServiceInterface.register",
"service.method": "AuthServiceInterface.login",
"service.method": "AuthServiceInterface.logout",
"service.method": "AuthServiceInterface.resetPassword",
"service.method": "AuthServiceInterface.getUser",
"service.method": "AuthServiceInterface.updateUser",
"service.method": "AuthServiceInterface.getNotificationSetting",
"service.method": "AuthServiceInterface.updateNotificationSetting",
}
No.3 RWKV-4-Raven-14B-v7-EngAndMore-20230408-ctx4096 インターフェースをクラスに変換
class User {
constructor(id: number, email: string, password: string, display_name: string, created_at: string, updated_at: string) {
this.id = id;
this.email = email;
this.password = password;
this.display_name = display_name;
this.created_at = created_at;
this.updated_at = updated_at;
}
}
No.3 RWKV-4-Raven-14B-v7-EngAndMore-20230408-ctx4096 詳細設計書からコーディング
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
email = '';
password = '';
constructor(private authService: AuthService) {}
ngOnInit() {}
onLogin() {
this.authService.login(this.email, this.password)
.pipe(first())
.subscribe(data => {
if (data && data.token) {
localStorage.setItem('token', data.token);
this.router.navigate(['/dashboard']);
}
else {
this.errorMessage = 'Invalid email or password';
}
});
}
onPasswordResetRequest() {
this.authService.resetPassword(this.email)
.pipe(first())
.subscribe(data => {
if (data && data.token) {
localStorage.setItem('token', data.token);
this.router.navigate(['/dashboard']);
} else {
this.errorMessage = 'Invalid email or password';
}
});
}
}
No.3 RWKV-4-Raven-14B-v7-EngAndMore-20230408-ctx4096 テトリス作って
<!DOCTYPE html>
<html>
<head>
<title>Tetris</title>
<style>
body {
background-color: #333;
color: #fff;
font-family: Arial, sans-serif;
}
#board {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
#board>div {
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin: 5px;
text-align: center;
font-size: 48px;
}
</style>
</head>
<body>
<div id="board"></div>
<script>
const board = document.getElementById('board');
const pieces = [];
let currentPiece = null;
let score = 0;
let gameOver = false;
let pieceSize = 50; // size of each piece in pixels
let pieceSpeed = 5; // speed of each piece in pixels per second
let gravity = -1; // gravity in pixels per second squared
let maxSpeed = 10; // maximum speed of each piece in pixels per second
let maxGravity = 10; // maximum acceleration of each piece in pixels per second squared
function update() {
// update the position of each piece based on its speed and gravity
for (let i = 0; i < pieces.length; i++) {
const piece = pieces[i];
piece.x += pieceSpeed;
piece.y += pieceSpeed;
if (piece.y + pieceSize > window.innerHeight) {
piece.y = 0 - pieceSize;
piece.x = Math.random() * window.innerWidth;
} else if (piece.x + pieceSize > window.innerWidth) {
piece.x = 0 - pieceSize;
piece.y = Math.random() * window.innerHeight;
} else if (piece.y < 0) {
piece.y = 0 - pieceSize;
piece.x = Math.random() * window.innerWidth;
} else if (piece.x < 0) {
piece.x = 0 - pieceSize;
piece.y = Math.random() * window.innerHeight;
} else if (piece.y + pieceSize > window.innerHeight) {
piece.y = window.innerHeight - pieceSize;
piece.x = Math.random() * window.innerWidth;
} else if (piece.x + pieceSize > window.innerWidth) {
piece.x = 0 - pieceSize;
piece.y = Math.random() * window.innerHeight;
} else if (piece.x + pieceSize > window.innerWidth) {
piece.x = 0 - pieceSize;
piece.y = Math.random() * window.innerHeight;
} else if (piece.y + pieceSize > window.innerHeight) {
piece.y = window.innerHeight - pieceSize;
piece.x = Math.random() * window.innerWidth;
} else if (piece.x < 0) {
piece.x = 0 - pieceSize;
piece.y = Math.random() * window.innerHeight;
} else if (piece.y < 0) {
piece.y = 0 - pieceSize;
piece.x = Math.random() * window.innerWidth;
}
}
// check for collisions between pieces and the board
for (let i = 0; i < pieces.length; i++) {
const piece = pieces[i];
for (let j = 0; j < board.children.length; j++) {
const pieceRect = piece.getBoundingClientRect();
if (pieceRect.left >= 0 && pieceRect.right <= window.innerWidth && pieceRect.top >= 0 && pieceRect.bottom <= window.innerHeight) {
const collision = board.children[j].getBoundingClientRect();
if (pieceRect.left < collision.left && pieceRect.right > collision.left && pieceRect.top < collision.top && pieceRect.bottom > collision.top) {
piece.x = Math.random() * window.innerWidth;
piece.y = Math.random() * window.innerHeight;
pieceSpeed = 5;
pieceGravity = pieceSpeed * 2;
score += 1;
}
}
}
}
// draw the pieces and the board on the canvas
for (let i = 0; i < pieces.length; i++) {
const piece = pieces[i];
const x = pieceSize * i + pieceSize / 2;
const y = pieceSize * j + pieceSize / 2;
ctx.fillStyle = '#fff';
ctx.fillRect(x, y, pieceSize, pieceSize);
ctx.fillStyle = '#333';
ctx.font = '24px Arial';
ctx.fillText(`${piece.text}`, x + pieceSize / 2, y + pieceSize / 2 + 5);
}
// draw the score on the bottom right corner of the screen
ctx.font = '24px Arial';
ctx.fillStyle = '#333';
ctx.fillText(`Score: ${score}`, 10, 50);
}
// start the game loop
function gameLoop() {
requestAnimationFrame(gameLoop);
update();
render();
}
// start the game loop when the page is loaded
window.onload = function () {
gameLoop();
};
</script>
</body>
</html>
No.4 RWKV-4-Raven-14B-v8-EngAndMore-20230408-ctx4096
No.4 RWKV-4-Raven-14B-v8-EngAndMore-20230408-ctx4096 MD表形式をjson形式に
{
"API ID": "AUTH01",
"service.method": "AuthServiceInterface.register",
"service.method args": {
"username": "user1",
"password": "password1"
}
},
{
"API ID": "AUTH02",
"service.method": "AuthServiceInterface.login",
"service.method args": {
"username": "user1",
"password": "password1"
}
},
{
"API ID": "AUTH03",
"service.method": "AuthServiceInterface.logout",
"service.method args": {}
},
{
"API ID": "AUTH04",
"service.method": "AuthServiceInterface.resetPassword",
"service.method args": {
"userId": "user2",
"newPassword": "new_password_123",
"newPasswordConfirmation": "new_password_123"
}
},
{
"API ID": "USR01",
"service.method": "UserServiceInterface.getUser",
"service.method args": {
"userId": "user1"
}
},
{
"API ID": "USR02",
"service.method": "UserServiceInterface.updateUser",
"service.method args": {
"userId": "user2",
"newUsername": "new_username_123",
"newPassword": "new_password_123",
"newPasswordConfirmation": "new_password_123"
}
},
{
"API ID": "USR03",
"service.method": "UserServiceInterface.getNotificationSetting",
"service.method args": {
"userId": "user2"
}
},
{
"API ID": "USR04",
"service.method": "UserServiceInterface.updateNotificationSetting",
"service.method args": {
"userId": "user2",
"newNotificationSetting": {
"notificationType": "email",
"notificationFrequency": "daily",
"notificationTimezone": "Asia/Tokyo"
}
}
}
No.4 RWKV-4-Raven-14B-v8-EngAndMore-20230408-ctx4096 インターフェースをクラスに変換
class User {
constructor(id: number, email: string, password: string, display_name: string, created_at: string, updated_at: string) {
this.id = id;
this.email = email;
this.password = password;
this.display_name = display_name;
this.created_at = created_at;
this.updated_at = updated_at;
}
}
No.4 RWKV-4-Raven-14B-v8-EngAndMore-20230408-ctx4096 詳細設計書からコーディング
import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
email = '';
password = '';
constructor(private authService: AuthService) {}
ngOnInit() {}
onLogin() {
this.authService.login(this.email, this.password)
.pipe(first())
.subscribe(data => {
if (data.token) {
localStorage.setItem('token', data.token);
this.router.navigate(['/dashboard']);
} else {
this.errorMessage = 'Invalid email or password.';
}
});
}
onPasswordResetRequest() {
this.authService.resetPassword(this.email, this.password)
.pipe(first())
.subscribe(data => {
if (data.token) {
localStorage.setItem('token', data.token);
this.router.navigate(['/dashboard']);
} else {
this.errorMessage = 'Invalid email or password.';
}
});
}
}
No.4 RWKV-4-Raven-14B-v8-EngAndMore-20230408-ctx4096 fp16 テトリス作って
<!DOCTYPE html>
<html>
<head>
<title>Tetris</title>
<style>
body {
margin: 0;
padding: 0;
}
#board {
width: 400px;
height: 400px;
border: 1px solid black;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#block {
width: 50px;
height: 50px;
border: 1px solid black;
background-color: white;
margin: 5px;
}
</style>
</head>
<body>
<div id="board">
<div id="block"></div>
</div>
<script>
const board = document.getElementById('board');
const block = document.getElementById('block');
let x = 0;
let y = 0;
let speed = 1;
let rotation = 0;
function update() {
// Update the position of the block
block.style.left = `${x}px`;
block.style.top = `${y}px`;
// Check for collisions with the edges of the board
if (x < 0) {
x = 0;
speed = -speed;
} else if (x + block.offsetWidth > window.innerWidth) {
x = window.innerWidth - block.offsetWidth;
speed = -speed;
}
if (y < 0) {
y = 0;
speed = -speed;
} else if (y + block.offsetHeight > window.innerHeight) {
y = window.innerHeight - block.offsetHeight;
speed = -speed;
}
// Check for collisions with the sides of the board
if (x < 0) {
x += speed * 2; // Increase speed to make it harder to get the block
} else if (x + block.offsetWidth > window.innerWidth) {
x -= speed * 2; // Decrease speed to make it harder to get the block
}
if (y < 0) {
y += speed * 2; // Increase speed to make it harder to get the block
} else if (y + block.offsetHeight > window.innerHeight) {
y -= speed * 2; // Decrease speed to make it harder to get the block
}
// Check for collisions with the sides of the board
if (block.offsetTop < 0) {
block.style.top = `${y}px`;
} else if (block.offsetTop + block.offsetHeight > window.innerHeight) {
block.style.top = `${window.innerHeight - block.offsetHeight}px`;
} else if (block.offsetLeft < 0) {
block.style.left = `${x}px`;
} else if (block.offsetLeft + block.offsetWidth > window.innerWidth) {
block.style.left = `${window.innerWidth - block.offsetWidth}px`;
}
// Check for collisions with the bottom of the board
if (block.offsetTop + block.offsetHeight > window.innerHeight) {
block.style.top = `${y}px`;
} else if (block.offsetTop < 0) {
block.style.top = `${y + block.offsetHeight}px`;
}
// Check for collisions with the sides of the board
if (block.offsetLeft < 0) {
block.style.left = `${x}px`;
} else if (block.offsetLeft + block.offsetWidth > window.innerWidth) {
block.style.left = `${window.innerWidth - block.offsetWidth}px`;
} else if (block.offsetTop < 0) {
block.style.top = `${y}px`;
} else if (block.offsetTop + block.offsetHeight > window.innerHeight) {
block.style.top = `${window.innerHeight - block.offsetHeight}px`;
}
}
requestAnimationFrame(update);
</script>
</body>
</html>
No.5 RWKV-4-Raven-14B-v9-Eng99%-Other1%-20230412-ctx8192 fp16
No.5 RWKV-4-Raven-14B-v9-Eng99%-Other1%-20230412-ctx8192 fp16 MD表形式をjson形式に
{
"AUTH01": {
"service.method": "AuthServiceInterface.register",
"service.parameters": {
"username": "username",
"password": "password"
}
},
"AUTH02": {
"service.method": "AuthServiceInterface.login",
"service.parameters": {
"username": "",
"password": ""
}
},
"AUTH03": {
"service.method": "AuthServiceInterface.logout",
"service.parameters": {}
},
"AUTH04": {
"service.method": "AuthServiceInterface.resetPassword",
"service.parameters": {
"username": "",
"password": "",
"newPassword": "",
"confirmPassword": ""
}
},
"USR01": {
"service.method": "UserServiceInterface.getUser",
"service.parameters": {}
},
"USR02": {
"service.method": "UserServiceInterface.updateUser",
"service.parameters": {
"username": "newUsername",
"email": "newEmail@example.com",
"firstName": "NewFirstName",
"lastName": "NewLastName",
"phoneNumber": "+1234567890",
"address1": "123 Main St.",
"address2": "",
"city": "San Francisco",
"stateProvinceCode": "CA",
"countryCodeAlpha2Code":"US",
"countryCodeAlpha3Code":"USA",
"countryCodeNumericCode":"+1",
"postalCode":"12345",
"birthday":"2022-01-01T00:00:00Z",
"_id":"5d6b9c9f5a7d0e7a4b0e8a4d", // User ID in MongoDB database (ObjectId)
"_rev":"1-f4c8c0e9a8b0d5f4e7a7d0e9a8b0d5f4f1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f4cf1e7a8b0d5f41dd6cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cfffd9cffdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdf,dfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdfdf. df\n;\n\n\Bob: +++
No.5 RWKV-4-Raven-14B-v9-Eng99%-Other1%-20230412-ctx8192 fp16 インターフェースをクラスに変換
class User {
constructor(id: number, email: string, password: string, display_name: string, created_at: string, updated_at: string) {
this.id = id;
this.email = email;
this.password = password;
this.display_name = display_name;
this.created_at = created_at;
this.updated_at = updated_at;
}
}
No.5 RWKV-4-Raven-14B-v9-Eng99%-Other1%-20230412-ctx8192 fp16 詳細設計書からコーディング
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../services/auth.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
email = '';
password = '';
constructor(private authService: AuthService) {}
ngOnInit() {}
onLogin() {
this.authService.login(this.email, this.password)
.pipe(first())
.subscribe(({ token }) => {
localStorage.setItem('token', token);
this.router.navigate(['/dashboard']);
});
}
onPasswordResetRequest() {
this.authService.resetPassword(this.email)
.pipe(first())
.subscribe(({ token }) => {
localStorage.setItem('token', token);
this.router.navigate(['/dashboard']);
});
}
}
No.5 RWKV-4-Raven-14B-v9-Eng99%-Other1%-20230412-ctx8192 fp16 テトリス作って
<!DOCTYPE html>
<html>
<head>
<title>Tetris</title>
<style>
body {
margin: 0;
padding: 0;
}
#container {
width: 800px;
height: 600px;
background-color: #ccc;
margin: auto;
display: flex;
flex-direction: column;
}
#block {
width: 50px;
height: 50px;
background-color: #f00;
margin: 10px;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="container">
<div id="block"></div>
<div id="block"></div>
<div id="block"></div>
<div id="block"></div>
<div id="block"></div>
</div>
<script>
const container = document.getElementById('container');
const blocks = [
document.getElementById('block'),
document.getElementById('block'),
document.getElementById('block'),
document.getElementById('block'),
document.getElementById('block')
];
function update() {
container.innerHTML = '';
for (let i = 0; i < blocks.length; i++) {
const block = blocks[i];
container.innerHTML += `<div id="${block.id}"></div>`;
}
}
setInterval(update, 1000);
</script>
</body>
</html>
No.6 Chat-GPT 3.5
No.6Chat-GPT 3.5 MD表形式をjson形式に
{
"APIs": [
{
"id": "AUTH01",
"service": "AuthServiceInterface",
"method": "register"
},
{
"id": "AUTH02",
"service": "AuthServiceInterface",
"method": "login"
},
{
"id": "AUTH03",
"service": "AuthServiceInterface",
"method": "logout"
},
{
"id": "AUTH04",
"service": "AuthServiceInterface",
"method": "resetPassword"
},
{
"id": "USR01",
"service": "UserServiceInterface",
"method": "getUser"
},
{
"id": "USR02",
"service": "UserServiceInterface",
"method": "updateUser"
},
{
"id": "USR03",
"service": "UserServiceInterface",
"method": "getNotificationSetting"
},
{
"id": "USR04",
"service": "UserServiceInterface",
"method": "updateNotificationSetting"
}
]
}
No.6 Chat-GPT 3.5 インターフェースをクラスに変換
export class User {
constructor(
public id: number,
public email: string,
public password: string,
public display_name: string,
public created_at: string,
public updated_at: string
) {}
}
No.6 Chat-GPT 3.5 詳細設計書からコーディング
<div class="login-page">
<h2>Login</h2>
<form (ngSubmit)="onLogin()">
<label>Email:</label>
<input type="email" [(ngModel)]="email" name="email" required>
<label>Password:</label>
<input type="password" [(ngModel)]="password" name="password" required>
<button type="submit">Login</button>
</form>
<a (click)="onPasswordResetRequest()">Forgot password?</a>
</div>
import { Component } from '@angular/core';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent {
email: string;
password: string;
constructor(private authService: AuthService) {}
onLogin() {
this.authService.login(this.email, this.password)
.subscribe(
data => {
localStorage.setItem('token', data.token);
// Redirect to DashboardPage
},
error => {
console.log(error);
// Display error message
}
);
}
onPasswordResetRequest() {
this.authService.resetPassword(this.email)
.subscribe(
data => {
// Redirect to PasswordResetConfirmationPage
},
error => {
console.log(error);
// Display error message
}
);
}
}
No.6 Chat-GPT 3.5 テトリス作って
<!DOCTYPE html>
<html>
<head>
<title>Tetris Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="gameboard"></div>
<script src="game.js"></script>
</body>
</html>
#gameboard {
width: 250px;
height: 500px;
border: 2px solid black;
position: relative;
}
.block {
position: absolute;
width: 25px;
height: 25px;
border: 1px solid black;
}
var board = [];
var currentShape;
var currentShapeType;
var currentX = 3;
var currentY = 0;
var shapes = [ // I-shape [[1, 1, 1, 1]],
// T-shape
[[1, 1, 1], [0, 1, 0]],
// L-shape
[[1, 1, 1], [1, 0, 0]],
// J-shape
[[1, 1, 1], [0, 0, 1]],
// O-shape
[[1, 1], [1, 1]],
// S-shape
[[0, 1, 1], [1, 1, 0]],
// Z-shape
[[1, 1, 0], [0, 1, 1]]
];
var colors = [ "red", "green", "blue", "orange", "purple", "yellow", "pink"];
function createBoard() {
for (var i = 0; i < 20; i++) {
board[i] = [];
for (var j = 0; j < 10; j++) {
board[i][j] = null;
}
}
}
function createShape() {
var randomIndex = Math.floor(Math.random() * shapes.length);
currentShapeType = randomIndex;
currentShape = shapes[randomIndex];
currentY = 0;
currentX = 3;
}
function drawBoard() {
var gameboard = document.getElementById("gameboard");
gameboard.innerHTML = "";
for (var i = 0; i < board.length; i++) {
for (var j = 0; j < board[i].length; j++) {
if (board[i][j]) {
var block = document.createElement("div");
block.className = "block";
block.style.backgroundColor = colors[board[i][j]];
block.style.top = i * 25 + "px";
block.style.left = j * 25 + "px";
gameboard.appendChild(block);
}
}
}
}
function drawShape() {
for (var i = 0; i < currentShape.length; i++) {
for (var j = 0; j < currentShape[i].length; j++) {
if (currentShape[i][j]) {
var block = document.createElement("div");
block.className = "block";
block.style.backgroundColor = colors[currentShapeType];
block.style.top = (i + currentY) * 25 + "px";
block.style.left = (j + currentX) * 25 + "px";
document.getElementById("gameboard").appendChild(block);
}
}
}
}
function clearShape() {
var blocks = document.getElementsByClassName("block");
for (var i = blocks.length - 1; i >= 0; i--) {
blocks[i].parentNode.removeChild(blocks[i]);
}
}
function moveDown() {
clearShape();
currentY++;
if (collides()) {
currentY--;
addToBoard();
createShape();
}
drawBoard();
drawShape();
}
function moveLeft() {
clearShape();
currentX--;
if (collides()) {
currentX++;
}
drawBoard();
drawShape();
}
function moveRight() {
clearShape();
currentX++;
if (collides()) {
currentX--;
}
drawBoard();
drawShape();
}
function rotateShape() {
clearShape();
var rotatedShape = [];
for (var i = 0; i < currentShape[0].length; i++) {
rotatedShape[i] = [];
for (var j = 0; j < currentShape.length; j++) {
rotatedShape[i][j] = currentShape[currentShape.length - j - 1][i];
}
}
currentShape = rotatedShape;
if (collides()) {
rotateShape();
}
}
function collides() {
for (var i = 0; i < currentShape.length; i++) {
for (var j = 0; j < currentShape[i].length; j++) {
if (currentShape[i][j] && (board[i + currentY] && board[i + currentY][j + currentX]) !== null) {
return true;
}
}
}
return false;
}
function addToBoard() {
for (var i = 0; i < currentShape.length; i++) {
for (var j = 0; j < currentShape[i].length; j++) {
if (currentShape[i][j]) {
board[i + currentY][j + currentX] = currentShapeType;
}
}
}
}
function checkLines() {
var linesCleared = 0;
for (var i = board.length - 1; i >= 0; i--) {
var line = board[i];
if (line.every(function(value) {
return value !== null;
})) {
linesCleared++;
board.splice(i, 1);
board.unshift(new Array(10).fill(null));
i++;
}
}
return linesCleared;
}
function updateScore(linesCleared) {
var score = parseInt(document.getElementById("score").textContent);
var level = parseInt(document.getElementById("level").textContent);
switch (linesCleared) {
case 1:
score += 100;
break;
case 2:
score += 200;
break;
case 3:
score += 400;
break;
case 4:
score += 800;
break;
}
document.getElementById("score").textContent = score;
if (score > (level * 1000)) {
document.getElementById("level").textContent = level + 1;
}
}
function gameLoop() {
moveDown();
var linesCleared = checkLines();
if (linesCleared > 0) {
updateScore(linesCleared);
}
setTimeout(gameLoop, 500 - (parseInt(document.getElementById("level").textContent) * 50));
}
function startGame() {
createBoard();
createShape();
drawBoard();
drawShape();
gameLoop();
}
document.addEventListener("keydown", function(event) {
switch (event.keyCode) {
case 37:
moveLeft();
break;
case 38:
rotateShape();
break;
case 39:
moveRight();
break;
case 40:
moveDown();
break;
}
});
startGame();
No.7 Chat-GPT 4
No.7 Chat-GPT 4 MD表形式をjson形式に
[
{
"api_id": "AUTH01",
"service_method": "AuthServiceInterface.register"
},
{
"api_id": "AUTH02",
"service_method": "AuthServiceInterface.login"
},
{
"api_id": "AUTH03",
"service_method": "AuthServiceInterface.logout"
},
{
"api_id": "AUTH04",
"service_method": "AuthServiceInterface.resetPassword"
},
{
"api_id": "USR01",
"service_method": "UserServiceInterface.getUser"
},
{
"api_id": "USR02",
"service_method": "UserServiceInterface.updateUser"
},
{
"api_id": "USR03",
"service_method": "UserServiceInterface.getNotificationSetting"
},
{
"api_id": "USR04",
"service_method": "UserServiceInterface.updateNotificationSetting"
}
]
No.7 Chat-GPT 4 インターフェースをクラスに変換
export class User {
constructor(
id,
email,
password,
display_name,
created_at,
updated_at
) {
this.id = id;
this.email = email;
this.password = password;
this.display_name = display_name;
this.created_at = created_at;
this.updated_at = updated_at;
}
}
No.7 Chat-GPT 4 詳細設計書からコーディング
import { Component } from '@angular/core';
import { AuthService } from './auth.service'; // Adjust the import path as needed
@Component({
selector: 'app-login-page',
templateUrl: './login-page.component.html',
styleUrls: ['./login-page.component.css']
})
export class LoginPageComponent {
email: string;
password: string;
constructor(private authService: AuthService) {}
onLogin() {
this.authService.login(this.email, this.password).subscribe(
(response) => {
localStorage.setItem('token', response.token);
// Navigate to DashboardPage
},
(error) => {
// Display error message
}
);
}
onPasswordResetRequest() {
this.authService.resetPassword(this.email).subscribe(
() => {
// Navigate to PasswordResetConfirmationPage
},
(error) => {
// Display error message
}
);
}
}
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor(private http: HttpClient) {}
login(email: string, password: string): Observable<{ token: string }> {
// Implement API call and return the response
}
resetPassword(email: string): Observable<any> {
// Implement API call and return the response
}
}
<form (ngSubmit)="onLogin()">
<div>
<label for="email">E-mail address:</label>
<input type="email" id="email" [(ngModel)]="email" name="email" required />
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" [(ngModel)]="password" name="password" required />
</div>
<button type="submit">Login</button>
</form>
<a (click)="onPasswordResetRequest()">Reset Password</a>
import { FormsModule } from '@angular/forms';
@NgModule({
// ...
imports: [
// ...
FormsModule
],
// ...
})
export class AppModule { }
No.7 Chat-GPT 4 テトリス作って
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #222;
margin: 0;
}
canvas {
border: 1px solid #fff;
}
</style>
</head>
<body>
<canvas id="game" width="320" height="640"></canvas>
<!-- <script src="tetris.js"></script> -->
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const scale = 20;
const rows = canvas.height / scale;
const cols = canvas.width / scale;
class Block {
constructor(x, y) {
this.x = x;
this.y = y;
}
draw() {
ctx.fillStyle = "white";
ctx.fillRect(this.x * scale, this.y * scale, scale, scale);
ctx.strokeStyle = "black";
ctx.strokeRect(this.x * scale, this.y * scale, scale, scale);
}
}
class Tetrimino {
constructor(shape) {
this.shape = shape;
this.blocks = [];
this.x = Math.floor(cols / 2) - 2;
this.y = 0;
this.initBlocks();
}
initBlocks() {
for (let y = 0; y < this.shape.length; y++) {
for (let x = 0; x < this.shape[y].length; x++) {
if (this.shape[y][x]) {
this.blocks.push(new Block(this.x + x, this.y + y));
}
}
}
}
draw() {
this.blocks.forEach(block => block.draw());
}
moveDown() {
this.y++;
this.updateBlocks();
}
moveLeft() {
this.x--;
this.updateBlocks();
}
moveRight() {
this.x++;
this.updateBlocks();
}
updateBlocks() {
this.blocks = [];
this.initBlocks();
}
}
const shapes = [
[
[1, 1, 1],
[0, 1, 0]
],
[
[1, 1],
[1, 1]
],
[
[1, 1, 0],
[0, 1, 1]
],
[
[0, 1, 1],
[1, 1, 0]
],
[
[1, 1, 1, 1]
]
];
function randomShape() {
return shapes[Math.floor(Math.random() * shapes.length)];
}
let tetrimino = new Tetrimino(randomShape());
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
tetrimino.draw();
tetrimino.moveDown();
setTimeout(update, 500);
}
document.addEventListener("keydown", (event) => {
switch (event.key) {
case "ArrowUp":
// Rotation logic can be implemented here
break;
case "ArrowDown":
tetrimino.moveDown();
break;
case "ArrowLeft":
tetrimino.moveLeft();
break;
case "ArrowRight":
tetrimino.moveRight();
break;
}
});
update();
</script>
</body>
</html>