FFH—AI 詩作 HttpRequest 練習

オープンソースの詳細については、以下をご覧ください。

51CTO オープンソース基本ソフトウェアコミュニティ

​​https://ost..com​​

序文

最近、オンライン授業で AI 詩作インターフェースを見ました。以前のフェッチインターフェースはメンテナンスされなくなったので、この機会に Hongmeng の http インターフェースを試してみました。次に、HTTP リクエストに関する基本的な知識を確認し、Hongmeng の HTTP リクエストを練習するために、簡単な AI 詩作デモを実装します。

デモ

http インターフェース常識補足

コンテンツタイプ

コンテンツ タイプの目的は、返されるコンテンツのコンテンツ タイプをクライアントに伝えることです。さまざまなコンテンツ タイプの形式は次のとおりです。

応答ステータス コード (ResponseCode)

各インターフェース要求に対して、サーバーは応答ステータス コードを返します。各ステータス コードには異なる意味があります。

コードの実装

1. ネットワーク権限を申請する

config.json ファイルにネットワーク権限を登録します。これにより、プログラムはネットワーク ソケットを開いてネットワーク接続を確立できるようになります。

 「必要な権限」 : [
 {
 「名前」 : 「ohos.permission.INTERNET」
 }
 ]

2. httpモジュールをインポートする

 '@ohos.net.http' からhttp をインポートします。

3. HttpRequestオブジェクトを作成する

createHttp() を呼び出して HttpRequest オブジェクトを作成した後、各 httpRequest は http リクエスト タスクに対応しており、再利用できないことに注意してください。つまり、ネットワーク リクエストごとに新しい HttpRequest オブジェクトを作成する必要があります。リクエストが実行されると、オブジェクトは自動的に破棄されます。

 httpRequest を http.createHttp() にします。

4. リクエストインターフェースを書く

 httpRequest . リクエスト(
 "https://py.myie9.com/cangtoutest/" + this .poemHead 、
 {
 ヘッダー: {
 'コンテンツタイプ' : 'text/plain'
 },
 読み取りタイムアウト: 10000 、
 接続タイムアウト: 10000
 }, ( エラー, データ) => {
 もしエラーが起きたら
console.info ( "xxx---" + JSON.stringify (データ) )
 this.aiResult = data.result ; ​
 } それ以外{
 console.info ( 'xxx--- エラー: ' + JSON.stringify ( err )) ;
 }
 })

ここまでで、単純な http リクエストが完了しました。

後で、リクエストをカプセル化して、メソッド、Content-Type など、変更する必要があるいくつかのパラメータを公開できます。後で時間を見つけて、HTTP リクエストのカプセル化に関するブログを書く予定です。

5. 頭韻詩の完全なコード

jsコード:

 '@ohos.net.http' からhttp をインポートします。
 '@system.router' からルーターをインポートします。
 // 各 httpRequest は http リクエストタスクに対応しており、再利用できません
httpRequest = http.createHttp () とします。

 エクスポートデフォルト{
 データ： {
 詩の見出し: "123" 、
 aiResult : 「上記の要件を満たすフィールドを入力してください」
 },
 初期化(){
 },
 戻る（） {
 ルーター.back ()
 },
 ヘッド詩を隠す() {
 httpRequest = http.createHttp ( ) ;
 httpRequest . リクエスト(
 "https://py.myie9.com/cangtoutest/" + this .poemHead 、
 {
 ヘッダー: {
 'コンテンツタイプ' : 'text/plain'
 },
 読み取りタイムアウト: 10000 、
 接続タイムアウト: 10000
 }, ( エラー, データ) => {
 もしエラーが起きたら
console.info ( "xxx---" + JSON.stringify (データ) )
 this.aiResult = data.result ; ​
 } それ以外{
 console.info ( 'xxx--- エラー: ' + JSON.stringify ( err )) ;
 }
 })
 },
 チェック1 （ e ）{
 console.log ( "xxx---" + JSON.stringify ( e.value ) )
 this.poemHead = e.value.poemHead ​ ​ ​
 this.hideHeadPoem () ;
 }
 }

CSSコード:

 。容器{
 ディスプレイ: フレックス;
 flex-direction : 列;
 コンテンツの中央揃え ;
 アイテムの位置合わせ: 中央;
 左: 0px ;
 上: 0px ;
 幅: 100% ;
 高さ: 100% ;
 }
 。タイトル{
 フォントサイズ: 60px ;
 テキスト配置: 中央;
 幅: 100% ;
 高さ： 40% ;
 マージン: 10px ;
 }
 。画面{
 コンテンツの中央揃え ;
 アイテムの位置合わせ: 中央;
 幅: 80% ;
 高さ： 35% ;
 境界線の半径: 20px ;
 背景色: #fff5f1f1 ;
 不透明度： 0.8 ;
 ボックスの影: 10px 10px 5px #888888 ;
 }
 .サブボタン{
 幅: 250px ;
 左マージン： 25% ;
 背景色: #ffa5552f ;
 上マージン: 5% ;
 }
 .subButton2 {
 幅: 250px ;
 高さ: 70px ;
 左マージン： 25% ;
 背景色: #ffa5552f ;
 上マージン： 2% ;
 }

HMLコード:

 < div クラス= "コンテナ" >
 < フォームクラス= "コンテナ" onsubmit = 'check1' >
 < input style = "width:80%;height:10%;margin-top: 15%;" type = "text" placeholder = "頭韻詩を生成するための文章を入力してください" name = 'poemHead' > </ input >
 < div クラス= "display" スタイル= "margin-top: 15%;" >
 < テキストスタイル= "余白: 40px;フォントサイズ: 38px;" >
 {{aiResult}}
 </ テキスト>
 </div> ​ ​
 < input class = "subButton" type = 'submit' >頭韻詩を生成します</ input >
 < button class = "subButton2" onclick = "back" >戻る</ button >
 </ フォーム>
 < image src = "../../common/123.png" style = "z-index: -1; position: fixed; width: 100%; height: 100%;" > </ image >
 </div> ​ ​

完全なデモ コードについては添付ファイルを参照してください。

https://ost..com/resource/2180.

オープンソースの詳細については、以下をご覧ください。

51CTO オープンソース基本ソフトウェアコミュニティ

​​https://ost..com​​.