AI Columns - Angular Data Grid

$(() => { const deployment = 'gpt-4o-mini'; const apiVersion = '2024-02-01'; const endpoint = 'https://public-api.devexpress.com/demo-openai'; const apiKey = 'DEMO'; const aiService = new AzureOpenAI({ dangerouslyAllowBrowser: true, deployment, endpoint, apiVersion, apiKey, }); async function getAIResponse(messages, signal) { const params = { messages, model: deployment, max_tokens: 1000, temperature: 0.7, }; const response = await aiService.chat.completions .create(params, { signal }); const result = response.choices[0].message?.content; return result; } async function getAIResponseRecursive(messages, signal) { return getAIResponse(messages, signal) .catch(async (error) => { if (!error.message.includes('Connection error')) { return Promise.reject(error); } DevExpress.ui.notify({ message: 'Our demo AI service reached a temporary request limit. Retrying in 30 seconds.', width: 'auto', type: 'error', displayTime: 5000, }); await new Promise((resolve) => setTimeout(resolve, 30000)); return getAIResponseRecursive(messages, signal); }); } const aiIntegration = new DevExpress.aiIntegration.AIIntegration({ sendRequest({ prompt }) { const isValidRequest = JSON.stringify(prompt.user).length < 5000; if (!isValidRequest) { return { promise: Promise.reject(new Error('Request is too long. Specify a shorter prompt.')), abort: () => {}, }; } const controller = new AbortController(); const signal = controller.signal; const aiPrompt = [ { role: 'system', content: prompt.system }, { role: 'user', content: prompt.user }, ]; const promise = getAIResponseRecursive(aiPrompt, signal); const result = { promise, abort: () => { controller.abort(); }, }; return result; }, }); const popupContentTemplate = function (vehicle) { const { Source, LicenseName, Author, Edits, } = vehicle; const sourceLink = `https://${Source}`; return $('<div>').append( $('<p>') .append($('<b>').text('Image licensed under: ')) .append($('<span>').text(LicenseName)), $('<p>') .append($('<b>').text('Author: ')) .append($('<span>').text(Author)), $('<p>') .append($('<b>').text('Source link: ')) .append( $('<a>', { href: sourceLink, target: '_blank', }) .text(sourceLink), ), $('<p>') .append($('<b>').text('Edits: ')) .append($('<span>').text(Edits)), ); }; const popup = $('#popup').dxPopup({ width: 360, height: 260, visible: false, dragEnabled: false, hideOnOutsideClick: true, showCloseButton: true, title: 'Image Info', position: { at: 'center', my: 'center', collision: 'fit', }, }).dxPopup('instance'); const createTrademarkTemplate = (vehicle) => { const { ID, Name, TrademarkName, } = vehicle; const trademarkWrapper = $('<div>').addClass('trademark__wrapper'); const imgWrapper = $('<div>').addClass('trademark__img-wrapper'); const img = $('<img>').addClass('trademark__img'); img.attr({ src: `../../../../images/vehicles/image_${ID}.png`, alt: `${TrademarkName} ${Name}`, tabindex: 0, role: 'button', 'aria-haspopup': 'dialog', 'aria-label': `${TrademarkName} ${Name} - press Enter for image info`, }); const showPopup = () => { popup.option('contentTemplate', () => popupContentTemplate(vehicle)); popup.show(); }; img.on('click', showPopup); img.on('keydown', (e) => { if (e.key === 'Enter') { showPopup(); } }); imgWrapper.append(img); trademarkWrapper.append(imgWrapper); const textWrapper = $('<div>').addClass('trademark__text-wrapper'); const trademarkText = $('<div>').addClass('trademark__text trademark__text--title').text(TrademarkName); const nameText = $('<div>').addClass('trademark__text trademark__text--subtitle').text(Name); textWrapper.append(trademarkText, nameText); trademarkWrapper.append(textWrapper); return trademarkWrapper; }; const createCategoryTemplate = ({ CategoryName }) => $('<div>').addClass('category__wrapper').text(CategoryName); $('#gridContainer').dxDataGrid({ dataSource: vehicles, showBorders: true, keyExpr: 'ID', paging: { pageSize: 10, }, aiIntegration, grouping: { contextMenuEnabled: false, }, columns: [ { caption: 'Trademark', width: 200, cellTemplate: (container, options) => { const vehicle = options.data; const imageWrapper = createTrademarkTemplate(vehicle); container.append(imageWrapper); }, }, { dataField: 'Price', alignment: 'left', format: 'currency', width: 100, }, { caption: 'Category', cellTemplate: (container, options) => { const category = options.data; const categoryWrapper = createCategoryTemplate(category); container.append(categoryWrapper); }, minWidth: 180, }, { dataField: 'Modification', width: 180, }, { dataField: 'Horsepower', width: 140, }, { dataField: 'BodyStyleName', caption: 'Body Style', width: 180, }, { name: 'AI column', caption: 'AI Column', type: 'ai', ai: { prompt: 'Identify the country where the vehicle model is manufactured. When looking up a country, consider vehicle brand, model, and specifications.', mode: 'auto', noDataText: 'No data', }, width: 200, fixed: true, fixedPosition: 'right', cssClass: 'ai__cell', }, ], onAIColumnRequestCreating(e) { e.data = e.data.map((item) => ({ ID: item.ID, TrademarkName: item.TrademarkName, Name: item.Name, Modification: item.Modification, })); }, }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.2.7/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="js/dx.all.js?v=25.2.7"></script> <script src="js/dx.ai-integration.js"></script> <script type="module"> import { AzureOpenAI } from "https://esm.sh/openai@4.73.1"; window.AzureOpenAI = AzureOpenAI; </script> <script src="data.js"></script> <script src="index.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="data-grid-demo"> <div id="gridContainer"></div> <div id="popup"></div> </div> </div> </body> </html>

#gridContainer { min-height: 560px; } #gridContainer .ai__cell { background-color: var(--dx-datagrid-row-alternation-bg); } .trademark__wrapper { display: flex; align-items: center; gap: 8px; } .trademark__img-wrapper { width: 40px; height: 40px; border: var(--dx-border-width) solid var(--dx-color-border); border-radius: var(--dx-border-radius); cursor: pointer; } .trademark__img-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: var(--dx-border-radius); } .trademark__text-wrapper { width: calc(100% - 48px); } .trademark__text { margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .trademark__text--title { font-weight: 600; } .trademark__text--subtitle { font-weight: 400; } .category__wrapper { display: inline-block; padding: 2px 8px; border-radius: 24px; background-color: var(--dx-color-separator); }

Angular Data Grid - AI Columns