phi4 + Ollama、ローカルLLM に挑戦

ollama run phi4

PS C:\Users\user1> ollama list
NAME           ID              SIZE      MODIFIED
phi4:latest    ac896e5b8b34    9.1 GB    12 hours ago

>>> 日本語わかりますか？
はい、私は日本語を理解しています。何か質問がある場合や、お手伝いが必要なことがあれば、どうぞお気軽にお尋ねください！

コード生成して欲しいです。
TODOアプリ、
React , tailwindCSS 使用したいです。

・TODOの追加機能を、追加したい

もちろんです！以下はReactとTailwind CSSを使った簡単なTODOアプリケーションのコード例です。このサンプルでは、新しいTODOを追加する機能を実装しています。

準備
まず、ReactとTailwind CSSが導入された環境で作業します。以下のようにcreate-react-appとTailwind CSSをセットアップすることができます：

Create React App

npx create-react-app todo-app
cd todo-app
Tailwind CSS をインストール

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js と styles.css の編集

tailwind.config.jsを以下のように設定します：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
src/index.cssを以下のように書き換えます：

@tailwind base;
@tailwind components;
@tailwind utilities;
アプリケーションコード

以下は、TODO追加機能を含む基本的なReactコンポーネントの例です：

// src/App.js

import React, { useState } from 'react';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, newTask]);
      setNewTask('');
    }
  };

  return (
    <div className="App bg-gray-100 min-h-screen flex items-center justify-center">
      <div className="w-full max-w-md p-8 bg-white rounded-lg shadow-xl">
        <h1 className="text-2xl font-bold mb-6 text-center">TODO List</h1>
        
        {/* Task input form */}
        <div className="mb-4 flex items-center">
          <input
            type="text"
            value={newTask}
            onChange={(e) => setNewTask(e.target.value)}
            placeholder="Add a new task..."
            className="flex-grow p-2 border rounded-l-md focus:outline-none"
          />
          <button 
            onClick={addTask} 
            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-r-md">
              Add
          </button>
        </div>

        {/* Task list */}
        <ul className="mb-6">
          {tasks.map((task, index) => (
            <li key={index} className="flex items-center mb-2">
              <span className="text-gray-700">{task}</span>
            </li>
          ))}
        </ul>

        {/* Footer */}
        <div className="text-center">
          <p className="text-xs text-gray-500">© 2023 TODO App</p>
        </div>
      </div>
    </div>
  );
}

export default App;
実行
すべての準備ができたら、以下のコマンドを使ってアプリケーションを開始します：

npm start
これによりブラウザが起動し、http://localhost:3000でTODOアプリケーションを確認できます。新しいTODOを追加するための入力欄と「Add」ボタンが表示されるはずです。

このコードには、基本的なTODO機能しか含まれていませんが、削除機能や編集機能を追加することでさらに拡張可能です。

mv .example.env .env

NEXT_PUBLIC_OLLAMA_URL="http://localhost:11434"

npm install

npm run dev

import ollama from 'ollama'

const response = await ollama.chat({
  model: 'llama2',
  messages: [{ role: 'user', content: 'Why is the sky blue?' }],
})
console.log(response.message.content)

import ollama from 'ollama'

const message = { role: 'user', content: 'Why is the sky blue?' }
const response = await ollama.chat({ model: 'llama3.1', messages: [message], stream: true })
for await (const part of response) {
  process.stdout.write(part.message.content)
}

D:\>ollama list
NAME                    ID              SIZE      MODIFIED
llama3.1:8b             46e0c10c039e    4.9 GB    38 seconds ago
qwen2.5-coder:latest    2b0496514337    4.7 GB    3 hours ago
qwen2.5-coder:7b        2b0496514337    4.7 GB    3 hours ago
llama3.2:latest         a80c4f17acd5    2.0 GB    4 hours ago
phi4-cline:latest       eacbc14d4070    9.1 GB    4 days ago
phi4:latest    

ollama run deepseek-r1:14b

* ollama run deepseek-r1:7b

D:\>ollama list
NAME                     ID              SIZE      MODIFIED
deepseek-r1:14b          ea35dfe18182    9.0 GB    3 hours ago
deepseek-r1:7b           0a8c26691023    4.7 GB    4 hours ago
deepseek-coder-v2:16b    63fb193b3a9b    8.9 GB    10 hours ago
llama3.1:8b              46e0c10c039e    4.9 GB    3 days ago
llama3.2:latest          a80c4f17acd5    2.0 GB    3 days ago
phi4-cline:latest        eacbc14d4070    9.1 GB    7 days ago
phi4:latest              ac896e5b8b34    9.1 GB    9 days ago