Html Editor - AI-powered Text Editing

@section ExternalDependencies { <script src="https://unpkg.com/devextreme-quill@1.7.1/dist/dx-quill.min.js"></script> <script type="module"> import { AzureOpenAI } from "https://esm.sh/openai@4.73.1"; window.AzureOpenAI = AzureOpenAI; </script> } @(Html.DevExtreme().HtmlEditor() .ID("html-editor") .Height(530) .Value(new JS("markup")) .AiIntegration(new JS("aiIntegration")) .Toolbar(toolbar => toolbar .Items(items => { items.Add().Name("ai").Commands(new object [] { "summarize", "proofread", "expand", "shorten", "changeStyle", "changeTone", "translate", "askAI", new { name = "custom", text = "Extract Keywords", prompt = new JS("() => { return 'Extract a list of keywords from the text and return it as a comma-separated string' }") } }); }) .Items(items => { items.Add().Name(HtmlEditorToolbarItem.Separator); items.Add().Name(HtmlEditorToolbarItem.Undo); items.Add().Name(HtmlEditorToolbarItem.Redo); }) ) ) <script> let aiService; const deployment = 'gpt-4o-mini'; const apiVersion = '2024-02-01'; const endpoint = 'https://public-api.devexpress.com/demo-openai'; const apiKey = 'DEMO'; async function getAIResponse(messages, signal) { const params = { messages, model: deployment, max_tokens: 1000, temperature: 0.7, }; return aiService.chat.completions.create(params, { signal }); } const aiIntegration = new DevExpress.aiIntegration({ sendRequest({ prompt }) { const controller = new AbortController(); const signal = controller.signal; const aiPrompt = [ { role: 'system', content: prompt.system, }, { role: 'user', content: prompt.user, }, ]; const promise = new Promise(async (resolve, reject) => { try { const response = await getAIResponse(aiPrompt, signal); const result = response.choices[0].message?.content; resolve(result); } catch { reject(); } }); const result = { promise, abort: () => { controller.abort(); }, }; return result; }, }); $(() => { aiService = new AzureOpenAI({ dangerouslyAllowBrowser: true, deployment, endpoint, apiVersion, apiKey, }); }); const markup = ` <h2> <img src="../../Content/images/widgets/HtmlEditor.svg" alt="HtmlEditor" /> Formatted Text Editor (HTML Editor) </h2> <br> <p>DevExtreme JavaScript HTML Editor is a client-side WYSIWYG text editor that allows its users to format textual and visual content and store it as HTML.</p> <p>Supported features:</p> <ul> <li>Inline formats: <ul> <li>Bold, italic, strikethrough text formatting</li> <li>Font, size, color changes (HTML only)</li> </ul> </li> <li>Block formats: <ul> <li>Headers</li> <li>Text alignment</li> <li>Lists (ordered and unordered)</li> <li>Code blocks</li> <li>Quotes</li> </ul> </li> <li>Custom formats</li> <li>Mail-merge placeholders (for example, %username%)</li> <li>Adaptive toolbar for working images, links, and color formats</li> <li>Image upload: drag-and-drop images onto the form, select files from the file system, or specify a URL.</li> <li>Copy-paste rich content (unsupported formats are removed)</li> <li>Tables support</li> </ul> `; </script>