⌨️
llama.cppの入力欄の高さを可変にし、日本語入力に対応させるTampermonkeyスクリプト
llama.cppは便利ですが、入力欄が不便です。具体的には以下の問題があります。
- 入力欄で、日本語変換を確定しようとしてEnterキーを押すとPostされてしまう
- 入力欄の高さが2行固定で、それ以上の場合見切れてしまう
この問題を解決するため、Chromeの拡張機能Tampermonkeyスクリプトを使います。
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