HarmonyOS鸿蒙Next技术训练营：AI作诗词，IamPoem，来试一试

HarmonyOS鸿蒙Next技术训练营：AI作诗词，IamPoem，来试一试

开发环境：Windows 10
DevEco beta4
语言：JS

index.hml文件

<div class="container">
    <div class="box">
        <text class="textTitle">
            {{ $t('strings.title') }}
        </text>
        <textarea class="class_textarea" onchange="onTextChang" id="keyPoem">
{{ $t('strings.title_Content') }}
        </textarea>
    </div>
    <div class="box">
        <input name="radio" type="radio" checked='true' value="0" onchange="radioOnChange">
        藏头诗
        <input name="radio" type="radio" checked="false" value="1" onchange="radioOnChange">
        AI作诗
    </div>
    <div class="box">
        <input class="button" type="button" value="提交" onclick="buttonClick">
    </div>
</div>

css文件：

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.box{
    width: 100%;
    height: 50px;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}
.textTitle {
    width: 100px;
    text-align: center;
}
.class_textarea{
    width: 250px;
}
.button {
    width: 150px;
    background-color: #17A98E;
}
@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}
@media screen and (device-type: wearable) {
    .title {
        font-size: 28px;
        color: #FFFFFF;
    }
}
@media screen and (device-type: tv) {
    .container {
        background-image: url("/common/images/Wallpaper.png");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .title {
        font-size: 100px;
        color: #FFFFFF;
    }
}
@media screen and (device-type: phone) and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

JS代码：

import prompt from '@system.prompt';
import fetch from '@system.fetch';

export default {
    data: {
        inputText: "我爱中国",
        poemType : 0,
        resultPoem: "",
    },
    radioOnChange(e) {
        var value = e.value
        this.poemType = value;
    },
    onTextChang(e) {
        this.inputText = e.text;
    },
    textChangeHead(e) {
        this.headPoemInput = e.text;
    },
    buttonClick(){
        if(this.poemType == 0){
            this.getHeadPoem();
        }else{
            this.getAIPoem();
        }
    },
    getHeadPoem() {
        if (this.inputText == "") {
            this.showDialog("请输入4个不同的汉字", "藏头诗生成失败");
            return;
        }
        let url = 'https://py.myie9.com/hidepoem/' + this.inputText;
        let that = this;
        this.resultPoem = "";
        fetch.fetch({
            url: url,
            method: 'GET',
            responseType: 'text',
            success: function (ret) {
                if (ret.code == 500) {
                    that.showDialog("获取失败---", "藏头诗生成失败");
                    return;
                }
                let data = ret.data;
                that.showDialog(data.toString(), "藏头诗生成成功");
            },
            fail: function (data, code) {
                if (data.code == 500) {
                    that.showDialog("获取失败---", "藏头诗生成失败");
                } else {
                    that.showDialog("获取失败----错误码：" + code + " - " + JSON.stringify(data), "Head生成错误");
                }
            }
        })
    },
    getAIPoem() {
        if (this.inputText == "") {
            this.showDialog("输入为空，请重新输入", "AI作诗生成失败");
            return;
        }
        let url = 'https://py.myie9.com/xuxietest/' + this.inputText;
        let that = this;
        this.resultPoem = "";
        fetch.fetch({
            url: url,
            method: 'GET',
            responseType: 'text',
            success: function (ret) {
                if (ret.code == 500) {
                    that.showDialog("获取失败---", "AI作诗生成失败");
                    return;
                }
                let data = ret.data;
                that.showDialog(data.toString(), "AI作诗生成成功");
            },
            fail: function (data, code) {
                if (data.code == 500) {
                    that.showDialog("获取失败---", "生成失败");
                } else {
                    that.showDialog("获取失败----错误码：" + code + " - " + JSON.stringify(data), "AI生成错误");
                }
            }
        })
    },
    showDialog(msg, title) {
        prompt.showDialog({
            title: title,
            message: msg,
            buttons: [{
                text: '关闭',
                color: '#17A98E'
            }],
            success: function (data) {
                console.log("用户点击关闭按钮");
            },
            cancel: function () {
                console.log("用户点击按钮");
            }
        })
    }
}