LWC と Models API で、高度にカスタマイズしたAIアプリを作る

import { LightningElement, api, wire } from "lwc";

export default class DemoSnsPostGenerator extends LightningElement {
    @api systemPrompt;

<targets>
    <target>lightning__RecordPage</target>
</targets>
<targetConfigs>
    <targetConfig targets="lightning__RecordPage">
        <property name="systemPrompt" type="String" label="システムプロンプト" default="あなたはSNS投稿文章を生成するプロのライターです。あなたは企業のソーシャルアカウントからお届けする魅力的なSNS投稿文章を作成するのが得意です。" />
    </targetConfig>
</targetConfigs>

<targetConfigs>
    <targetConfig targets="lightning__RecordPage">
        <objects>
            <object>Product2</object>
        </objects>
    </targetConfig>
</targetConfigs>

import { getRecord } from "lightning/uiRecordApi";
const FIELDS = ["Product2.Description"];

export default class DemoSnsPostGenerator extends LightningElement {
    @api recordId;
    @wire(getRecord, { recordId: "$recordId", fields: FIELDS }) product2;

<lightning-textarea lwc:ref="topic" label="トピック"></lightning-textarea>
<lightning-radio-group lwc:ref="language" label="言語" options={writingLanguages} type="button"></lightning-radio-group>
<lightning-radio-group lwc:ref="style" label="スタイル" options={writingStyles} type="button"></lightning-radio-group>
<lightning-slider lwc:ref="length" label="文章量(文字数)" max="400" step="10"></lightning-slider>
<lightning-slider lwc:ref="hashTags" label="ハッシュタグ" value={hashTags} max="10"></lightning-slider>
<lightning-radio-group lwc:ref="llm" label="LLM" options={modelOptions} type="button"></lightning-radio-group>

createPrompt() {
    const prompt = `
${this.systemPrompt}
以下の商品情報、ユーザーからのリクエストに応じたコンテンツを作成します。

商品情報: """
${this.product2.data.fields.Description.value}
"""

ユーザーからのリクエスト: """
- トピック: ${this.refs.topic.value} 
- コンテンツの言語: ${this.refs.language.value}
- 文章の文字数の目安: ${this.refs.length.value}
- 文体: ${this.refs.style.value}
- ハッシュタグの数（この数だけハッシュタグを文末につけて）: ${this.refs.hashTags.value}
"""

コンテンツ:
`;
    return prompt;
}

import getGeneratedText from "@salesforce/apex/DemoSnsPostGeneratorController.getGeneratedText";

const modelName = this.refs.llm.value;
const prompt = this.createPrompt();
const payload = { prompt, modelName };
this.content = await getGeneratedText(payload);

@AuraEnabled
public static string getGeneratedText(String prompt, String modelName) {
    aiplatform.ModelsAPI.createGenerations_Request request = new aiplatform.ModelsAPI.createGenerations_Request();
    request.modelName = modelName;
    aiplatform.ModelsAPI_GenerationRequest requestBody = new aiplatform.ModelsAPI_GenerationRequest();
    request.body = requestBody;
    requestBody.prompt = prompt;
    try {
        aiplatform.ModelsAPI modelsAPI = new aiplatform.ModelsAPI();
        aiplatform.ModelsAPI.createGenerations_Response response = modelsAPI.createGenerations(request);
        return response.Code200.generation.generatedText;
    } catch (aiplatform.ModelsAPI.createGenerations_ResponseException ex) {
        System.debug('The following exception occurred: ' + ex);
    }
    return null;
}

get formattedContent() {
    if (this.content) {
      return this.content.replace(/#/, "<br/><br/>#").replace(/(#\S+)/g, '<a href="">$1</a> ');
    }
    return "";
}