HarmonyOS 鸿蒙Next #HarmonyOS技术训练营# 基于HarmonyOS的AI作诗

HarmonyOS 鸿蒙Next #HarmonyOS技术训练营# 基于HarmonyOS的AI作诗 前言

看完了【HarmonyOS训练营–HarmonyOS零基础JS开发之AI作诗】实战解析实现AI作诗APP，让开发者零基础入门，快速掌握用JS开发HarmonyOS手机APP！

实现效果

代码

demo源码仓的zzt_Poem文件。

正文

一、创建一个空白的工程

1. 安装和配置DevEco Studio 3

DevEco Studio 3的下载和安装我是参考这里进行的，文档中说得非常详细了，这里就不重复啰嗦啦♪(^∇^*)

DevEco Studio 3下载

DevEco Studio 3安装

1. 创建一个Empty Phone应用

DevEco Studio下载安装成功后，打开DevEco Studio，点击左上角的File，点击New，再选择New Project，选择Empty Ability选项，点击Next按钮。

将文件命名为AI_Poem（文件名不能出现中文或者特殊字符，否则将无法成功创建项目文件），Project Type勾选Application，选择保存路径，Language勾选JS，选择API7，最后点击Finish按钮。

1. 准备工作

在entry>src>main>config.json文件中最下方"launchType": "standard"的后面添加以下代码，这样就可以实现去掉应用上方的标签栏了。

"metaData":
{
    "customizeData":
    [
        {
            "name": "hwc-theme",
            "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar",
            "extra": ""
        }
    ]
}

二、代码文件结构

三、编写代码

1. 界面布局

index.hml:

<div class="container">
    <div class="item-container">
        <text class="title">藏头诗</text>
        <div class="item-textarea" style="width: 100%;border-width: 2px;">
            <textarea onchange="textChangeKey" placeholder="点击输入4个不重复的汉字" id="keyPoem">我爱祖国</textarea>
        </div>
        <div style="margin-top: 10px;">
            <input type="button" class="btn" onclick="genHeadPoem" value="AI生成藏头诗"/>
        </div>
        <div class="hr"></div>
        <text class="title">输入第一句诗</text>
        <div class="item-textarea" style="width: 100%;height: 30%;border-width: 2px;">
            <textarea style="width: 100%;height: 100%;" onchange="textChangeHead" placeholder="点击输入一两句诗词，逗号分隔" id="headPoem">君心清雅似兰花</textarea>
        </div>
        <div style="margin-top: 20px;">
            <input type="button" class="btn" onclick="genPoem" value="AI生成整首诗"/>
        </div>
    </div>
</div>

1. 数据

index.js:

data: {
    headPoemInput: "君心清雅似兰花",
    keywordInput: "我爱祖国",
    resultPoemInput: "",
}

1. 获取输入的文本

index.js:

textChangeKey(e) {
    this.keywordInput = e.text;
},
textChangeHead(e) {
    this.headPoemInput = e.text;
}

1. 通过接口获取生成的诗

index.js:

fetch.fetch({
    url: url,
    method: 'GET',
    responseType: 'text',
    success: function(ret){
        console.log(JSON.stringify(ret));

        if(ret.code == 500){
            that.showDialog("您的这个藏头我接不上诗哦，换一个吧", "藏头诗生成失败");
            return;
        }

        let data = ret.data;
        console.log(data.toString());
        that.showDialog(data.toString(), "藏头诗生成成功");
    },
    fail: function(data, code){
        if(data.code == 500){
            that.showDialog("您的这个藏头我接不上诗哦，换一个吧", "藏头诗生成失败");
        }else{
            that.showDialog("发生错误，请重试。错误码：" + code + "。" + JSON.stringify(data), "AI错误");
        }
    }
})

1. 显示生成的诗

index.js:

prompt.showMessageDialog({
    title: title,
    message: msg,
    buttons: [{
        text: '关闭',
        color: '#33dd44'
              }],
    success: function(data){
        console.log(JSON.stringify(data));
        console.log("用户点击关闭按钮");
    },
    cancel: function(){
        console.log("用户点击按钮");
    }
})

写在最后

以上就是本次作品的关键代码了，详细代码可以到demo源码仓里去查看~HarmonyOS技术训练营真的棒，收获颇丰吖，爱了爱了(ㅎ-ㅎ;)