💥

Ollama + phi-4 + Cool Cline を使いローカルでコード生成を試す

2025/01/11に公開

Docker

ローカル環境で手軽に大規模言語モデル (LLM) を試せる Ollama と phi-4 モデル、そして VS Code の拡張機能である Cool Cline を組み合わせて、コード生成を行うメモです。WSL2でもできると思います。

環境

Ubuntu 24.04
Docker
GeForce RTX 4060Ti(VRAM 16GB)
VS Code
Cool Cline 拡張機能

手順

DockerのインストールとNVIDIA Container Toolkitの設定

DockerでGPUを使えるようにします。以下の記事を参考にしました。

Ollamaの起動とphi-4モデルのダウンロード

Ollamaのコンテナを起動します。モデルはコンテナの/root/.ollamaにダウンロードされるのでローカルの適当なフォルダをマウントします。ポートの11434はllamaからとってきてるみたいですね。

docker run -d --rm --gpus=all -v ollama:/root/.ollama -p 11434:11434 --name ollama ollama/ollama

phi-4のテスト

Phi-4が動作するか確認します。

docker exec -it ollama ollama run phi4

モデルが9.1GBあるので初回はダウンロードを待ちましょう。

>>> Hello
Hello! How can I assist you today? If you have any questions or need information, feel free to let me know.

動いてますね。

phi-4 のコンテキスト長の設定

Ollamaのデフォルト設定だとコンテキスト長が足りないのでModelfile を編集してコンテキスト長を大きくします。

FROM phi4:latest

PARAMETER num_ctx 16384

docker exec -it ollama bash
ollama create phi4-cline:latest -f root/.ollama/phi4-cline.Modelfile

Cool Cline のインストールと設定

VS Code を開き、拡張機能 Marketplace から Cool Cline をインストールします。

インストール後、Cool Cline の設定を行います。コマンドパレット (Ctrl+Shift+P または Cmd+Shift+P) を開き、「Cool Cline: Focus on View」を選択します。

LLM として Ollama を選択し、モデルとしてさっき作成したphi4-cline:latest を指定します。API キーは不要です。

コード生成を試す

Cool Cline のビューで、生成したいコードの説明を入力するとソースコードが勝手に生成されます。ポチポチApproveしていけば動作確認までできてしまいます。

今回は「Webブラウザで動作するToDoアプリを作って」という指示をしたら、index.html、 styles.css、script.jsという3つのファイルが出力されて実際にブラウザでエラーなく動きました。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To Do App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>ToDoリスト</h1>
    <form id="todo-form">
        <input type="text" id="task-input" placeholder="新しいタスクを入力してください" required>
        <button type="submit">追加</button>
    </form>
    <ul id="task-list"></ul>

    <script src="script.js"></script>
</body>
</html>

styles.css

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f9;
}

h1 {
    color: #333;
}

#todo-form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

#task-input {
    flex-grow: 1;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 8px 16px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #4cae4c;
}

#task-list {
    list-style-type: none;
    padding: 0;
}

#task-list li {
    background-color: #fff;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

script.js

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('todo-form');
    const taskInput = document.getElementById('task-input');
    const taskList = document.getElementById('task-list');

    form.addEventListener('submit', (event) => {
        event.preventDefault();
        if (taskInput.value.trim() !== '') {
            addTask(taskInput.value);
            taskInput.value = '';
        }
    });

    function addTask(taskContent) {
        const listItem = document.createElement('li');
        listItem.textContent = taskContent;
        listItem.addEventListener('click', () => {
            listItem.classList.toggle('completed');
        });
        taskList.appendChild(listItem);

        const deleteButton = document.createElement('button');
        deleteButton.textContent = '削除';
        deleteButton.addEventListener('click', (event) => {
            event.stopPropagation();
            taskList.removeChild(listItem);
        });

        listItem.appendChild(deleteButton);
    }
});

GPU使用状況

コード生成中のGPU稼働状況。VRAM16GBあれば問題なさそうですね。4060Tiだと28.02 tokens/sくらいのスピードが出ました。早くはないですが遅すぎるということもないかと。

まとめ

Ollama、phi-4、Cool Cline を組み合わせることで、ローカル環境で手軽にコード生成を試すことができました。API料金も気にならないし、ローカルで動くの企業ユースもしやすいのではないでしょうか。