デモ
リッチテキストエディタコントロール
AI文章作成アシスタント
概要

概要

このサンプルでは、リッチテキストエディタでAIサービスを利用し、文章の生成や校正、要約、拡張、短縮、翻訳などの機能を確認できます。

InputManJSでは、AIサービスを利用して文章の生成や校正、要約、翻訳など、さまざまなAI機能を手軽に使用することができます。 ここでは、AI機能を利用するための準備や主な設定方法について説明します。 事前準備 AI機能を利用するには、GcConfigurationManagerクラスのregisterAIServiceメソッドを使用してAIサービスを事前に登録する必要があります。 詳細は製品ヘルプをご参照ください。 AI文章作成アシスタント機能の表示 AI文章作成アシスタント機能を表示するには、ツールバーやメニューバーにAI文章作成アシスタントボタンを追加します。また、コンストラクタのAITextAssistantConfigプロパティを設定することで、表示するメニュー項目をカスタマイズできます。 組み込み機能 すべての組込みのAI機能は以下の通りです。GcTextAssistantBehaviorを指定して、表示メニューが変更できます。 製品側で用意したプロンプトと、ダイアログでユーザーが入力したプロンプトを組み合わせてAIサービスに送信できます。 GC.InputMan.AI.GcTextAssistantBehaviorの値 機能 説明 GenerateText 文章を生成 キーワードを入力して、生成ボタンをクリックすると文章を生成 ReviseText 文章を校正 文章を校正 SummarizeContent 内容を要約 文章の要約を生成 ExpandContent 内容を拡張 文章の内容を拡張 SimplifyContent 内容を短縮 文章の内容を短縮 ChangeToProfessionalTone プロフェッショナル 文章をプロフェッショナルなトーンに変更 ChangeToCasualTone カジュアル 文章をカジュアルなトーンに変更 ChangeToBusinessStyle ビジネス 文章をビジネススタイルに変更 ChangeToTechnicalStyle 技術 文章を技術スタイルに変更 TranslateToEnglish 英語に翻訳 文章を英語に翻訳 TranslateToJapanese 日本語に翻訳 文章を日本語に翻訳 ChangeToBasicThemeStyle シンプル 文章をシンプルテーマに変換 ChangeToBusinessThemeStyle ビジネス 文章をビジネステーマに変換 ChangeToTechnologicalThemeStyle 技術 文章を技術テーマに変換 ChangeToArtisticThemeStyle アート 文章をアートテーマに変換
import "@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css"; import "./styles.css"; import { InputMan } from "@mescius/inputman.richtexteditor"; import "@mescius/inputman.richtexteditor/JS/plugins/all"; import { createAIService } from "./aiDemoHelper.js"; InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern; InputMan.ConfigurationManager.registerAIService(createAIService()); new InputMan.GcRichTextEditor(document.getElementById("gcRichTextEditor"), { plugins: [InputMan.GcRichTextEditorPluginItem.All], toolbar: [ InputMan.GcRichTextEditorToolbarItem.AITextAssistant, InputMan.GcRichTextEditorToolbarItem.SeperateLine, InputMan.GcRichTextEditorToolbarItem.Undo, InputMan.GcRichTextEditorToolbarItem.Redo, InputMan.GcRichTextEditorToolbarItem.SeperateLine, InputMan.GcRichTextEditorToolbarItem.Styles, InputMan.GcRichTextEditorToolbarItem.Bold, InputMan.GcRichTextEditorToolbarItem.Italic, InputMan.GcRichTextEditorToolbarItem.Underline, InputMan.GcRichTextEditorToolbarItem.SeperateLine, InputMan.GcRichTextEditorToolbarItem.AlignCenter, InputMan.GcRichTextEditorToolbarItem.AlignJustify, InputMan.GcRichTextEditorToolbarItem.AlignLeft, InputMan.GcRichTextEditorToolbarItem.SeperateLine, InputMan.GcRichTextEditorToolbarItem.Indent, InputMan.GcRichTextEditorToolbarItem.Outdent ], menubar: [ InputMan.GcRichTextEditorMenuBarItem.File, InputMan.GcRichTextEditorMenuBarItem.Edit, InputMan.GcRichTextEditorMenuBarItem.View, InputMan.GcRichTextEditorMenuBarItem.Insert, InputMan.GcRichTextEditorMenuBarItem.Format, InputMan.GcRichTextEditorMenuBarItem.Tools, "AI" ], menu: { AI: { title: "AI文章作成アシスタント", items: [InputMan.GcRichTextEditorMenuItem.AITextAssistant] } }, height: 500, setup: (editor) => { editor.addContextToolbar("textselection", { items: ["aitextassistant"], predicate: () => editor.getSelection(), position: "selection" }); } });
<!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"> <meta name="description" content="リッチテキストエディタ 使い方" lang="ja" xml:lang="ja" /> <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> <textarea id="gcRichTextEditor"> <p>InputManJSは、リッチテキスト、テキスト、マスク、日付時刻、数値、コンボなど用途別に最適化された入力用コントロールを収録したJavaScript製品です。Webアプリケーションにおけるストレスフリーの細かい入力フォームを開発できます。</p> </textarea> </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' }, } });