|
| 1 | +$(() => { |
| 2 | + |
| 3 | + const aiService = new AzureOpenAI({ |
| 4 | + dangerouslyAllowBrowser: true, |
| 5 | + deployment, |
| 6 | + endpoint, |
| 7 | + apiVersion, |
| 8 | + apiKey, |
| 9 | + }); |
| 10 | + |
| 11 | + async function getAIResponse(messages, signal) { |
| 12 | + const params = { |
| 13 | + messages, |
| 14 | + model: deployment, |
| 15 | + max_tokens: 1000, |
| 16 | + temperature: 0.7, |
| 17 | + }; |
| 18 | + |
| 19 | + const response = await aiService.chat.completions.create(params, { signal }); |
| 20 | + const result = response.choices[0].message?.content; |
| 21 | + |
| 22 | + return result; |
| 23 | + } |
| 24 | + |
| 25 | + const aiIntegration = new DevExpress.aiIntegration({ |
| 26 | + sendRequest({ prompt }) { |
| 27 | + const controller = new AbortController(); |
| 28 | + const signal = controller.signal; |
| 29 | + |
| 30 | + const aiPrompt = [ |
| 31 | + { role: 'system', content: prompt.system }, |
| 32 | + { role: 'user', content: prompt.user }, |
| 33 | + ]; |
| 34 | + |
| 35 | + const promise = getAIResponse(aiPrompt, signal); |
| 36 | + |
| 37 | + const result = { |
| 38 | + promise, |
| 39 | + abort: () => { |
| 40 | + controller.abort(); |
| 41 | + }, |
| 42 | + }; |
| 43 | + |
| 44 | + return result; |
| 45 | + }, |
| 46 | + }); |
| 47 | + |
| 48 | + const createTrademarkTemplate = (vehicle) => { |
| 49 | + const { |
| 50 | + ID, |
| 51 | + Name, |
| 52 | + TrademarkName, |
| 53 | + } = vehicle; |
| 54 | + const trademarkWrapper = $('<div>').addClass('trademark__wrapper'); |
| 55 | + const imgWrapper = $('<div>').addClass('trademark__img-wrapper'); |
| 56 | + const img = $('<img>').addClass('trademark__img'); |
| 57 | + img.attr({ |
| 58 | + src: `../../../../images/vehicles/image_${ID}.png`, |
| 59 | + alt: `${TrademarkName} ${Name}`, |
| 60 | + }); |
| 61 | + |
| 62 | + const popoverId = `popover-${ID}`; |
| 63 | + const popoverWrapper = $('<div>'); |
| 64 | + popoverWrapper.html(` |
| 65 | + <div class="license-info__title">License Information</div> |
| 66 | + <div class="license-info__content"> |
| 67 | + <p><strong>Image:</strong> ${TrademarkName} ${Name}</p> |
| 68 | + <p><strong>License:</strong> Stock Photo License</p> |
| 69 | + <p><strong>Attribution:</strong> © DevExpress Demos</p> |
| 70 | + <p><strong>Usage:</strong> For demonstration purposes only</p> |
| 71 | + </div> |
| 72 | + `); |
| 73 | + |
| 74 | + img.attr('data-popover-target', popoverId); |
| 75 | + |
| 76 | + const popover = $('<div>').attr('id', popoverId).dxPopover({ |
| 77 | + target: `[data-popover-target="${popoverId}"]`, |
| 78 | + showEvent: 'mouseenter', |
| 79 | + hideEvent: 'mouseleave', |
| 80 | + position: 'top', |
| 81 | + contentTemplate: () => popoverWrapper, |
| 82 | + }); |
| 83 | + |
| 84 | + imgWrapper.append(img, popover); |
| 85 | + trademarkWrapper.append(imgWrapper); |
| 86 | + |
| 87 | + const textWrapper = $('<div>').addClass('trademark__text-wrapper'); |
| 88 | + const trademarkText = $('<div>').addClass('trademark__text trademark__text--title').text(TrademarkName); |
| 89 | + const nameText = $('<div>').addClass('trademark__text trademark__text--subtitle').text(Name); |
| 90 | + |
| 91 | + textWrapper.append(trademarkText, nameText); |
| 92 | + trademarkWrapper.append(textWrapper); |
| 93 | + |
| 94 | + return trademarkWrapper; |
| 95 | + }; |
| 96 | + |
| 97 | + const createCategoryTemplate = ({ CategoryName }) => { |
| 98 | + return $('<div>').addClass('category__wrapper').text(CategoryName); |
| 99 | + } |
| 100 | + |
| 101 | + $('#gridContainer').dxDataGrid({ |
| 102 | + dataSource: vehicles, |
| 103 | + columns: [ |
| 104 | + { |
| 105 | + caption: 'Trademark', |
| 106 | + width: 220, |
| 107 | + cellTemplate: (container, options) => { |
| 108 | + const vehicle = options.data; |
| 109 | + const imageWrapper = createTrademarkTemplate(vehicle); |
| 110 | + container.append(imageWrapper); |
| 111 | + } |
| 112 | + }, |
| 113 | + { |
| 114 | + dataField: 'Price', |
| 115 | + format: 'currency', |
| 116 | + width: 100, |
| 117 | + headerFilter: { |
| 118 | + groupInterval: 20000, |
| 119 | + }, |
| 120 | + }, |
| 121 | + { |
| 122 | + caption: 'Category', |
| 123 | + cellTemplate: (container, options) => { |
| 124 | + const category = options.data; |
| 125 | + const categoryWrapper = createCategoryTemplate(category); |
| 126 | + container.append(categoryWrapper); |
| 127 | + } |
| 128 | + }, |
| 129 | + { |
| 130 | + dataField: 'Modification', |
| 131 | + width: 180 |
| 132 | + }, |
| 133 | + { |
| 134 | + dataField: 'Horsepower', |
| 135 | + width: 140 |
| 136 | + }, |
| 137 | + { |
| 138 | + dataField: 'BodyStyleName', |
| 139 | + caption: 'Body Style', |
| 140 | + width: 180 |
| 141 | + }, |
| 142 | + { |
| 143 | + name: 'AI column', |
| 144 | + caption: 'Origin Country', |
| 145 | + type: 'ai', |
| 146 | + ai: { |
| 147 | + aiIntegration, |
| 148 | + prompt: 'show the country of origin for the following vehicles', |
| 149 | + mode: 'auto', |
| 150 | + showHeaderMenu: true, |
| 151 | + noDataText: 'No data', |
| 152 | + emptyText: 'Unknown', |
| 153 | + }, |
| 154 | + width: 200, |
| 155 | + fixed: true, |
| 156 | + fixedPosition: "right", |
| 157 | + cellTemplate: ($container) => { |
| 158 | + $container.addClass("ai__cell"); |
| 159 | + }, |
| 160 | + // headerCellTemplate: ($container) => { |
| 161 | + // $container.addClass("ai__cell"); |
| 162 | + // } |
| 163 | + } |
| 164 | + ], |
| 165 | + }); |
| 166 | +}); |
0 commit comments