InputManJSでは、AIサービスを利用して文章の生成や校正、要約、翻訳など、さまざまなAI機能を手軽に使用することができます。
ここでは、AI機能を利用するための準備や主な設定方法について説明します。
事前準備
AI機能を利用するには、GcConfigurationManagerクラスのregisterAIServiceメソッドを使用してAIサービスを事前に登録する必要があります。
詳細は製品ヘルプをご参照ください。
AI文章作成アシスタント機能の表示
AI文章作成アシスタント機能の表示を有効にするには、コンストラクタのshowAITextAssistantButtonプロパティにtrueを設定します。
AITextAssistantConfigプロパティを利用することで、表示するAI機能のメニュー項目をカスタマイズすることができます。
組み込み機能
すべての組込みの機能は以下の通りです。GcTextAssistantBehaviorを指定して、表示メニューが変更できます。
製品側で用意したプロンプトと、ダイアログでユーザーが入力したプロンプトを組み合わせてAIサービスに送信できます。
GC.InputMan.AI.GcTextAssistantBehaviorの値
機能
説明
GenerateText
文章を生成
キーワードを入力して、生成ボタンをクリックすると文章を生成
ReviseText
文章を校正
文章を校正
SummarizeContent
内容を要約
文章の要約を生成
ExpandContent
内容を拡張
文章の内容を拡張
SimplifyContent
内容を短縮
文章の内容を短縮
ChangeToProfessionalTone
プロフェッショナル
文章をプロフェッショナルなトーンに変更
ChangeToCasualTone
カジュアル
文章をカジュアルなトーンに変更
ChangeToBusinessStyle
ビジネス
文章をビジネススタイルに変更
ChangeToTechnicalStyle
技術
文章を技術スタイルに変更
TranslateToEnglish
英語に翻訳
文章を英語に翻訳
TranslateToJapanese
日本語に翻訳
文章を日本語に翻訳
import "@mescius/inputman/CSS/gc.inputman-js.css";
import { InputMan } from "@mescius/inputman";
import { createAIService } from "./aiDemoHelper.js";
import "./styles.css";
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
InputMan.ConfigurationManager.registerAIService(createAIService());
new InputMan.GcMultiLineTextBox(document.getElementById("gcMultiLineTextBox1"), {
width: 700,
height: 200,
showAITextAssistantButton: true,
AITextAssistantConfig: {
behaviorConfig: {
dialogConfig: {
width: 650,
height: 400,
}
}
},
text: "InputManJSは、テキスト、マスク、日付時刻、数値、コンボなどの入力コントロールを提供するJavaScript製品です。Webアプリケーションで使いやすい入力フォームを効率よく実装できます。"
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>複数行テキストコントロール - AI文章作成アシスタント - 概要</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function () {
System.import('./src/app');
}
</script>
</head>
<body>
<div class="flexbox">
<div>
<textarea id="gcMultiLineTextBox1"></textarea>
</div>
</div>
</body>
</html>
body {
box-sizing: content-box !important;
height: 551px !important;
}
function getAIQueryUrl() {
if (typeof globalThis !== "undefined"
&& typeof globalThis.__INPUTMAN_AI_ENDPOINT__ === "string"
&& globalThis.__INPUTMAN_AI_ENDPOINT__) {
return globalThis.__INPUTMAN_AI_ENDPOINT__;
}
var pathname = typeof window === "undefined" ? "" : window.location.pathname;
return pathname.indexOf("/inputmanjs/demos/") === 0
? "/inputmanjs/demos/server/api/queryAI"
: "/api/queryAI";
}
function readChoiceText(payload, key) {
var choice = payload && payload.choices && payload.choices[0];
var part = choice && choice[key];
return part && typeof part.content === "string" ? part.content : "";
}
function buildMessages(context) {
var sections = [];
if (context.behavior) {
sections.push("Behavior:\n" + context.behavior);
}
if (context.prompt) {
sections.push("Instruction:\n" + context.prompt);
}
sections.push("Current content:\n" + (context.input || ""));
return [
{ role: "system", content: sections.join("\n\n") }
];
}
async function streamCompletion(response, streamWriter) {
var reader = response.body.getReader();
var decoder = new TextDecoder();
var buffer = "";
while (true) {
var result = await reader.read();
if (result.done) {
break;
}
buffer += decoder.decode(result.value, { stream: true });
var events = buffer.split(/\r?\n\r?\n/);
buffer = events.pop() || "";
for (var i = 0; i < events.length; i++) {
var dataText = events[i]
.split(/\r?\n/)
.filter(function(line) {
return line.indexOf("data:") === 0;
})
.map(function(line) {
return line.slice(5).trim();
})
.join("");
if (!dataText || dataText === "[DONE]") {
continue;
}
var payload = JSON.parse(dataText);
if (payload.error) {
throw new Error(payload.error);
}
var text = readChoiceText(payload, "delta");
if (text) {
streamWriter(text);
}
}
}
}
function createAIService(options) {
var resolvedOptions = options || {};
var stream = resolvedOptions.stream === undefined ? true : !!resolvedOptions.stream;
var aiQueryUrl = getAIQueryUrl();
return async function(context) {
var response = await fetch(aiQueryUrl, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
messages: buildMessages(context),
stream: stream
})
});
if (stream) {
if (!response.ok) {
throw new Error("AI request failed (" + response.status + ")");
}
await streamCompletion(response, context.streamWriter);
return;
}
var payload = await response.json();
if (!response.ok) {
throw new Error("AI request failed (" + response.status + ")");
}
return readChoiceText(payload, "message");
};
}
export {
createAIService
};
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'@mescius/inputman.richtexteditor': 'npm:@mescius/inputman.richtexteditor/index.js',
"@mescius/inputman.richtexteditor/CSS": "npm:@mescius/inputman.richtexteditor/CSS",
'@mescius/inputman.richtexteditor/JS/plugins/advlist': 'npm:@mescius/inputman.richtexteditor/JS/plugins/advlist/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/all': 'npm:@mescius/inputman.richtexteditor/JS/plugins/all/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/autosave': 'npm:@mescius/inputman.richtexteditor/JS/plugins/autosave/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/charmap': 'npm:@mescius/inputman.richtexteditor/JS/plugins/charmap/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/directionality': 'npm:@mescius/inputman.richtexteditor/JS/plugins/directionality/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/emoticons': 'npm:@mescius/inputman.richtexteditor/JS/plugins/emoticons/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/fullscreen': 'npm:@mescius/inputman.richtexteditor/JS/plugins/fullscreen/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/htmlcode': 'npm:@mescius/inputman.richtexteditor/JS/plugins/htmlcode/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/image': 'npm:@mescius/inputman.richtexteditor/JS/plugins/image/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/link': 'npm:@mescius/inputman.richtexteditor/JS/plugins/link/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/lists': 'npm:@mescius/inputman.richtexteditor/JS/plugins/lists/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/media': 'npm:@mescius/inputman.richtexteditor/JS/plugins/media/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/pagebreak': 'npm:@mescius/inputman.richtexteditor/JS/plugins/pagebreak/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/preview': 'npm:@mescius/inputman.richtexteditor/JS/plugins/preview/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/save': 'npm:@mescius/inputman.richtexteditor/JS/plugins/save/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/searchreplace': 'npm:@mescius/inputman.richtexteditor/JS/plugins/searchreplace/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/table': 'npm:@mescius/inputman.richtexteditor/JS/plugins/table/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/template': 'npm:@mescius/inputman.richtexteditor/JS/plugins/template/plugin.js',
'@mescius/inputman.richtexteditor/JS/plugins/wordcount': 'npm:@mescius/inputman.richtexteditor/JS/plugins/wordcount/plugin.js',
'@mescius/inputman.comment': 'npm:@mescius/inputman.comment/index.js',
'@mescius/inputman.comment/CSS': 'npm:@mescius/inputman.comment/CSS',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ja': 'npm:@mescius/spread-sheets-resources-ja/index.js',
'@mescius/spread-sheets/styles': 'npm:@mescius/spread-sheets/styles',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
