我想在交互式 Canvas 上的矩形内显示 Dialogflow 的输入。
index.js 文件中的对话流程运行良好。但我无法接收设计 Canvas 的 main.js 中的输入。
我认为 Canvas 应该设置正确。当取消注释 main.js 底部的“showR()”时，index.html 看起来就像预期的矩形和我用它初始化的“Error”字符串。
当我在操作控制台中进行测试时， Canvas 的框架在智能显示屏上正确显示。但是在触发“Reqcategory”意图后，应该会弹出一个矩形，其中包含最后一个用户输入，但这不会发生。
我尝试了各种可能性来移交输入，例如将其缓存在变量或实体中，或者使用 ${} 和其他符号获取其值......但没有成功。
这是我的代码。我将它们削减为相关部分。
index.js
'use strict';
const {
dialogflow,
Suggestions,
ImmersiveResponse,
} = require('actions-on-google');
const functions = require('firebase-functions');
const app = dialogflow({debug: true});
const firebaseConfig = JSON.parse(process.env.FIREBASE_CONFIG);
app.intent('Default Welcome Intent', (conv) => {
conv.ask('Hello....');
conv.ask(new ImmersiveResponse({
url: `https://${firebaseConfig.projectId}.firebaseapp.com`,
}));
});
// app.intent('Reqcategory', (conv, {Rcategory}) => {
app.intent('Reqcategory', (conv, input) => {
conv.ask('Ok. Creating...!');
conv.ask(new ImmersiveResponse({
state: {
// rcreate: Rcategory,
rcreate: input,
},
}));
});
exports.yourAction = functions.https.onRequest(app);main.js & main.css & index.html
'use strict;'
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var ak = "Error";
const callbacks = {
onUpdate(state) {
if ('rcreate' in state) {
ak = state.rcreate; //overwrite 'Error'-String with user input
showR();
}
},
};
function showR(){
requestAnimationFrame(showR);
var c = new CreateR(100,100,ak);
c.createR();
}
function CreateR(x,y,cat){
this.x = x;
this.y = y;
this.cat = cat;
this.createR = function(){
ctx.beginPath();
ctx.strokeStyle = "#000000";
ctx.fillStyle = "#FFFFFF";
ctx.rect(x,y,200,100);
ctx.fill();
ctx.stroke();
ctx.font = "12px Arial";
ctx.fillStyle = "#000000";
ctx.strokeStyle = "#000000";
ctx.textAlign = "center";
ctx.fillText(cat, 200, 120);
}
}
showR(); //uncomment to test html
assistantCanvas.ready(callbacks);html {
display: flex;
height: 100%;
}
body {
display: flex;
flex: 1;
margin: 0;
background-color: #F5F5F5;
}
.view {
position: relative;
flex: 1;
}
canvas {
display: block;
background-color: white;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: transparent;
}
.debug {
display: flex;
flex-direction: column;
/* Uncomment below to disable the debug overlay */
/* display: none !important; */
width: 200px;
position: absolute;
right: 8px;
top: 8px;
bottom: 8px;
}
.stats {
display: flex;
justify-content: flex-end;
}
.logs {
display: block;
flex: 1;
opacity: 0.8;
overflow-y: scroll;
text-align: right;
font-size: 12px;
}
.logs > p {
display: inline-block;
padding-top: 1px;
padding-bottom: 1px;
margin: 0px;
margin-top: 1px;
background: black;
max-width: 100%;
font-family: Arial, sans-serif;
color: white;
text-align: right;
overflow-wrap: break-word;
}
.logs > p.error {
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>test123</title>
<style type="text/css">
canvas {
border: 6px solid navy;
background: #D6EAF8;
}
</style>
<!-- Disable favicon requests -->
<link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
<!-- Load Assistant Canvas CSS and JavaScript -->
<link rel="stylesheet" href="https://www.gstatic.com/assistant/immersivecanvas/css/styles.css">
<script src="https://www.gstatic.com/assistant/immersivecanvas/js/immersive_canvas_api.js"></script>
</head>
<body>
<canvas width="1200" height="600" padding-left="56px"></canvas>
<script src="js/main.js"></script>
</body>
</html>如有任何帮助，我们将不胜感激。
最佳答案
它现在可以使用 conv.query 而不是 input。
关于node.js - 如何将 Dialogflow 输入移交给 Interactive Canvas，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56994286/