Zenn
🎲

ローカル LLM ですごいやつに出会った／Qwen3 と Qwen2.5-Coder と比較（Web アプリ編）

に公開
LLM
LM Studio
Qwen3
glm4
Qwen2.5-Coder
tech

こいつに驚いた THUDM/GLM-4-32B-0414

Youtube の THUDM GLM-4-32B LOCAL Test (INSANE UI & Web Design Skills) - Bijan Bowen が目に入って、触ってみたら、すごいすごいの感動の嵐（言い過ぎ）。

決して、仕事で業務システム開発して納品できるとか、個人でバイブコーディングしてリリースしちゃうとか、そんなレベルの話ではない。今まで触って来たものに比べたら UI がひとつ頭抜けているくらい。言っちゃえばどんぐりの背比べ（低いレベルでの）。

しかし感動したことに変わりは無いので、メモがてらココに残す。

タスク管理アプリを作ってもらう

環境

  • Macbook Pro M1 Max 64GB
  • LM Studio (0.3.15)
    • コンテキスト長: 32,768（実際は 10,000 も使っていないけど）

制約

  • 一発出し（プロンプト一回投げて終わり）

ユーザープロンプト

実際に投げたプロンプト（Google 翻訳の英語）

Implement a web application based on the following requirements.

# Task management web application

## Overview

Implement a web application for managing daily work tasks by individuals.

## Functional requirements

### Task information

- Task content
- Scheduled completion date
- Status
    - Incomplete
    - Completed

### Data management

- Data persistence
- Data loading
    - When the application is loaded
    - When data is saved
- Data saving
    - When a task is registered
    - When a task is deleted
    - When the task status is updated

### Task operations

- Registration
- Deletion
- Status update
    - Mark a task as completed.
    - Restart a task (mark it as incomplete).

### Displaying tasks

- Task list
    - Filter
        - All
        - Incomplete
        - Completed
        - Overdue
    - Sort
        - Scheduled completion date (ascending, descending)

## User interface requirements

### Color scheme

- Monotone base
- Matte texture

### Style

- Contemporary style
- Flat design

### Layout

- Liquid and responsive design
- Grid layout
- Grid-based spacing

### Displaying task status

- Visually distinguish different states.

### Constraints

- Do not change the status by turning a checkbox on or off.
- Do not show the completed state with a strikethrough.
- Do not use heading tags such as `<h1>`, `<h2>`, `<h3>`, etc., as various titles are not necessary in this application.

## Architectural requirements

### Programming language

- HTML
- JavaScript
- CSS

### Coding policy

- Emphasize maintainability.

### Data persistence

- localStorage
- JSON

### File structure

- index.html
- script.js
- styles.css

### Constraints

- Do not use external libraries.

Implement a production-ready application that meets the requirements, not a sample application.
When resolving questions or making decisions, use the user experience as a guide for implementation.

欲しい機能とざくっと方針を書いた。

元々書いた原文

下記の要件に基づき、ウェブアプリケーションを実装してください。

# タスク管理ウェブアプリケーション

## 概要

日々の仕事のタスクを個人で管理するためのウェブアプリケーションを実装する。

## 機能要件

### タスクの情報

- タスクの内容
- 完了予定日
- 状態
    - 未完了
    - 完了

### データ管理

- データの永続化
- データの読み込み
    - アプリケーションロード時
    - データ保存時
- データの保存
    - タスクの登録時
    - タスクの削除時
    - タスクの状態更新時

### タスクの操作

- 登録
- 削除
- 状態更新
    - タスクを完了状態にする。
    - タスクを再開する（未完了にする）。

### タスクの表示

- タスク一覧
    - フィルター
        - 全て
        - 未完了
        - 完了
        - 期限切れ
    - ソート
        - 完了予定日（昇順、降順）

## ユーザーインタフェース要件

### 配色

- モノトーンベース
- マットな質感

### スタイル

- コンテンポラリースタイル
- フラットデザイン

### レイアウト

- リキッドなレスポンシブデザイン
- グリッドレイアウト
- グリッドベースのスペーシング

### タスク状態の表示

- 視覚的に状態の違いが認識できる。

### 制約

- チェックボックスの ON/OFF で状態を変更しないこと。
- 完了状態を取り消し線で表現しないこと。
- 本アプリケーションでは各種タイトルは不要なため、 `<h1>` 、 `<h2>` 、 `<h3>` 等の見出しタグは使用しないこと。

## アーキテクチャー要件

### プログラミング言語

- HTML
- JavaScript
- CSS

### コーディング方針

- メンテナンス性を重視する。

### データ永続化

- localStorage
- JSON

### ファイル構成

- index.html
- script.js
- styles.css

### 制約

- 外部ライブラリは使用しないこと。

サンプルアプリケーションではなく、要件を満たしたリリース可能なアプリケーションを実装してください。
不明点を解決する場合や判断が必要な場合は、ユーザー体験の向上を指針にして実装を進めてください。

THUDM/GLM-4

THUDM/GLM-4-32B-0414

thudm-glm-4-32b-0414

「で？」、って感じだと思うw
でもね。すごいんですよw

  • 😀 すごいところ
    • バグが無い（少なくとも気づいていない）。
    • 期限切れの表示は指定していないけど、赤字の "Overdue" で表してくれている。
    • 状態表示は指定していないけど、タスク（カード）の右上の丸の色（赤: 期限切れ、緑: 完了、青: 未完了）で表してくれている。
    • 完了予定日にカレンダーアイコン付けてくれている。
    • カードのレスポンシブデザイン。
    • ボタンっぽい "Add Task" ボタンと、カード内はボタンデザインをシンプルにした使い分け。
    • 未完了/完了のトグルボタン。
    • 指定していないけど、各タスクに完了予定日を表示。（やってくれない LLM 少なくない。ローカルの小さい言語モデルはね。）
  • 😇 余計な世話感あるけど良かったところ
    • カードのカーソルホバーでふわっと浮く。
    • タスクの登録や削除で右下にトーストでのメッセージ表示。
  • 😕 いまいちだったところ
    • タスク入力はテキストエリアでも良いけど、見た目としては、デザインが崩れている。
    • カード内の状態表示の丸あたりもデザイン崩れ。
    • カード内のボタンは、下揃えが良かった。
    • h1 使うな、と明記しているのに使っている。
    • デザインが悪いわけではないけど、プロンプトでの指示はあまり反映されていない？
    • HTML、CSS、JavaScript を別ファイルで指定したけど、index.html のみで済ませたw

THUDM/GLM-4-9B-0414

thudm-glm-4-9b-0414

同じプロンプトだけど、全然違う UI 出してきた。
はっきり言って見やすくはない。
ただね、このチャレンジ精神は評価したい。

  • 😀 すごいところ
    • 9B ですよ？、9B。上記 32B の 28% です。パラメーター数だけが性能の指標ではないのかもしれないけど、現実的なパフォーマンス。
    • バグ無し。
    • 要件満たしている。
    • いくらでも出てくるけどここまで。
  • 😇 余計な世話感あるけど良かったところ
    • 32B と同様に、トースト通知。
  • 😕 いまいちだったところ
    • 文字の読みづらさ。
    • 縦にながーい。
    • こっちも index.html のみで済ますんかーい。

Qwen3

Qwen/Qwen3-32B

qwen3-32b

ちょうど公開されたので、試してみた。
なんか、これ生成されちゃうと、すげーすげー言っていた GLM-4 が霞むw
さすが最新のモデル。

  • 😀 すごいところ
    • h1 を使わないという指示を守ってくれた。
    • 大きな崩れは無い。
    • バグが無い。
    • しっかりレスポンシブ。
  • 😇 余計な世話感あるけど良かったところ
    • 特に無い。無くて良い。
  • 😕 いまいちだったところ
    • 期限切れの表現が無い。これはちょっと痛い。
    • カード内のボタンは下揃えが良かった。
    • "Sort by:" の左側のスペースが小さいのが気になる。

敢えて、上に含めないけど、プロンプト投げてから、考えている時間がながーーーい！、これ作るのに LLM が考えること 16 分。そこから生成開始（考えている間も生成はしているけど）。

以上

Qwen/Qwen3-14B

qwen3-14b

  • 😀 すごいところ
    • ボタンで言いたいことはあるけど、うまくまとまっている。
    • タグっぽさあるけど、フィルターとソートのデザイン嫌いじゃない。
  • 😇 余計な世話感あるけど良かったところ
    • 特になし。
  • 😕 いまいちだったところ
    • h1 付けちゃうんだよなー。
    • 期限切れの表現が無い。
    • カード内のボタンがね。
    • "Filter:" と "Sort by Date:" のところのレスポンシブ対応がいまいち。
    • 32B では 16分間だった思考時間も、すこしは現実的に。良いとは言えないけど、品質とのトレードオフなら耐えられるレベル（個人差有り）。

Qwen/Qwen3-30B-A3B

qwen3-30b-a3b

アクティブパラメーター数が 3B のモデル。
モデルサイズでかくなっちゃうけど、Q8_0 の量子化で試した。

  • 😀 すごいところ
    • アクティブパラメーター数とはいえ、3B でバグも見当たらない。すごいよ。
    • レスポンシブに対応。
  • 😇 余計な世話感あるけど良かったところ
    • 特になし。
  • 😕 いまいちだったところ
    • 期限切れの表現が無いどころか、日付表示が無い。表示しろと指定はしていないけどね。（データとしては日付を持っていた。）
    • Add Task ボタンは良かったけど、他のボタンがどぎつい。
    • ボタンサイズとか、スペースとか言いたいことはいくつかある。けど、まとまり感は悪くない。

Qwen2.5-Coder

Qwen/Qwen2.5-Coder-32B-Instruct

qwen2.5-coder-32b-instruct

上の、 GLM-4 と Qwen3 が出てくるまでは、良かったんだよ、本当に。これでもさ。

  • 😀 良かったところ
    • h1 使っていない。サイコー
    • フィルターとソート部分のレスポンシブ対応。（細かいこと言えばダメだけど。）
    • Add Task ボタンの色が攻めてるけど悪くない。
  • 😇 余計な世話感あるけど良かったところ
    • 特になし。
  • 😕 いまいちだったところ
    • 完了予定日の入力が、衝撃の prompt ！（斬新）
    • タスク操作のボタンw
    • 期限切れの表現が無い。

Qwen/Qwen2.5-Coder-14B-Instruct

qwen2.5-coder-14b-instruct

ソートが無い、期限切れの表現が無い、などあるけど、32B より良さげ？？
疲れたの細かいことは割愛。

生成コードの行数

モデル パラメーター数 総行数
THUDM/GLM-4-32B-0414 32B 560 行
THUDM/GLM-4-9B-0414 9B 575 行
Qwen/Qwen3-32B 32B 321 行
Qwen/Qwen3-14B 14B 318 行
Qwen/Qwen3-30B-A3B 3B 288 行
Qwen/Qwen2.5-Coder-32B-Instruct 32B 268 行
Qwen/Qwen2.5-Coder-14B-Instruct 14B 258 行

モデル毎に傾向がある。GLM-4 の行数の多さが際立つ。

もちろんモデルごとの頭の良さ？もあるのだろうけど、一度に生成するプログラムのコード量の制約？的なものの差がかなり結果に影響するということか？

ここまで来て気がついた

"THUDM/GLM-Z1" という推論モデルがあった。
もしかして、コーディング能力は GLM-4 より上か？
また試す。

そして、、

実際に開発する時は、MCP Server や Editor の機能をモリモリ使って開発することになるだろう。

わざわざローカルで動かさなくても、無料で高性能な LLM を使わせてくれるサービスもある。

なんでこんなことをやっているんだっけ？

理由はない。

次回予告

次回は、 Python で、ゲーム三昧 🕹️

GitHubで編集を提案

Discussion