⌨️

llama.cppの入力欄の高さを可変にし、日本語入力に対応させるTampermonkeyスクリプト

2025/01/29に公開

llama.cppは便利ですが、入力欄が不便です。具体的には以下の問題があります。

  • 入力欄で、日本語変換を確定しようとしてEnterキーを押すとPostされてしまう
  • 入力欄の高さが2行固定で、それ以上の場合見切れてしまう

この問題を解決するため、Chromeの拡張機能Tampermonkeyスクリプトを使います。

llama.cppの入力欄
llama.cppの入力欄

@match の部分は適宜、ご自分の環境のllama.cppのurlに変更してください。前方一致したurlで、このscriptが適用されます。

// ==UserScript==
// @name         llama.cpp UI改善
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  llama.cppのUIを改善:Enterキー無効化とボタン有効化
// @match        http://localhost:8080/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // DOMの読み込み完了後に実行
    document.addEventListener('DOMContentLoaded', () => {
        // textareaとsendButtonのDOM取得
        const textarea = document.querySelector('#msg-input');
        const sendButton = document.querySelector('.btn-primary');

        // テキストエリアのスタイル設定
        textarea.style.minHeight = '50px';
        textarea.style.maxHeight = '300px';
        textarea.style.height = 'auto';
        textarea.style.resize = 'vertical';
        textarea.style.overflowY = 'auto';

        // テキストエリアの高さを内容に応じて自動調整
        textarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = this.scrollHeight + 'px';
        });

        // EnterキーによるPost送信を止める。Shift&Enterによる改行は許可する
        textarea.addEventListener('keydown', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                e.stopPropagation();
                return false;
            }
        }, true);

        // 送信ボタンを常に有効化。デフォルトではEnterキー入力を受けて有効化されるため。
        sendButton.disabled = false;
        
        // ボタンのdisabled属性の変更を監視
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.attributeName === 'disabled') {
                    sendButton.disabled = false;
                }
            });
        });
        
        // 監視の設定
        observer.observe(sendButton, {
            attributes: true,
            attributeFilter: ['disabled']
        });
    });
})();

なお、llama.cppのSendボタンはbuttonでsubmitボタンではなく、またformのsubmitキャンセル実装ではうまく動きませんでした。

Discussion