I have developed chatbot and want to integrate in a website.I am following this github link that has predefined libraries for chatbotUI to embbed as an iframe. https://github.com/aws-samples/aws-lex-web-ui Below is the code from github:
<html>
<head>
<title>My Parent Page</title>
</head>
<body>
<h1>Welcome to my parent page</h1>
<!-- loader script -->
<script src="./lex-web-ui-loader.js"></script>
<script>
/*
The loader library creates a global object named ChatBotUiLoader
It includes the IframeLoader constructor
An instance of IframeLoader has the load function which kicks off
the load process
*/
// options for the loader constructor
var loaderOptions = {
// you can put the chatbot UI config in a JSON file
configUrl: './chatbot-ui-loader-config.json',
// the full page chatbot UI that will be iframed
iframeSrcPath: './chatbot-index.html#/?lexWebUiEmbed=true'
};
// The following statement instantiates the IframeLoader
var iframeLoader = new ChatBotUiLoader.IframeLoader(loaderOptions);
// chatbot UI config
// The loader can also obtain these values from other sources such
// as a JSON file or events. The configUrl variable in the
// loaderOptions above can be used to put these config values in a file
// instead of explicitly passing it as an argument.
var chatbotUiConfig = {
ui: {
// origin of the parent site where you are including the chatbot UI
// set to window.location.origin since hosting on same site
parentOrigin: window.location.origin,
},
iframe: {
// origin hosting the HTML file that will be embedded in the iframe
// set to window.location.origin since hosting on same site
iframeOrigin: window.location.origin,
},
cognito: {
// Your Cognito Pool Id - this is required to provide AWS credentials
poolId: '<your cognito pool id>'
},
lex: {
// Lex Bot Name in your account
botName: '<your lex bot name>'
}
};
// Call the load function which returns a promise that is resolved
// once the component is loaded or is rejected if there is an error
iframeLoader.load(chatbotUiConfig)
.then(function () {
console.log('iframe loaded');
})
.catch(function (err) {
console.error(err);
});
</script>
</body>
</html>
I went to parent.html (almost similar to the code above)inside src/website/parent.html of the github folder and made changes to the srcipt src path ,cognito poolid and lex name referring to the above code.
1)In config url inside the code above,I dont know what path to give for chatbot-ui-loader-config.json.There is no such json file inside dist directory.Should I create my own ?
2)I created an website using EC2 linux instance.I have my index file and aws-lex-web-ui (github folder) inside my var/www/html.Inside index file,I am calling the parent.html of aws-lex-web-ui folder.Is this method correct?
In output I am getting the heading content of the parent .html page .But It seems its not invoking the lex-web-ui-loader.js .I am not sure where I go wrong.
I have given a wrong path .I pointed the loader file lex-web-ui-loader.js to a correct location inside my folder and it worked.
Related
I have a website www.theraplounge.co that allows users to upload videos. The problem is our limit on file sizes are to small. How can I increase the file size users are able to upload through my forms.py FileField? By the way I’m currently using Amazon S3.
You should be able to configure it via DATA_UPLOAD_MAX_MEMORY_SIZE or/and FILE_UPLOAD_MAX_MEMORY_SIZE setting attributes (remember that you should give the value in bytes).
Check it out:
https://docs.djangoproject.com/en/4.0/ref/settings/#std-setting-DATA_UPLOAD_MAX_MEMORY_SIZE
https://docs.djangoproject.com/en/4.0/ref/settings/#std-setting-FILE_UPLOAD_MAX_MEMORY_SIZE
The problem here is heroku 30 second timeout as i found large files upload on development server but not the production server. The solution would be to upload the files in the front-end using javascript as it doesn't load the browser. I am currently trying to use Javascript AWS SDK to upload video files in the front-end. I got the code to work on small files under 30MB but i face the problem of uploading large files. Posting the working Javascript AWS SDK code below:
<div>
<input type="file" id="fileUpload">
</div>
<div>
<button onclick="s3upload()">Submit</button>
</div>
<script type="text/javascript">
function s3upload() {
AWS.config.region = 'us-east-1'; // Region
AWS.config.credentials = new AWS.CognitoIdentityCredentials({
IdentityPoolId: 'MY-COGNITO-CREDITIONS',
});
var files = document.getElementById('fileUpload').files;
if (files)
{
var file = files[0];
var fileName = file.name;
var fileUrl = 'https://theraplounge.s3.amazonaws.com/' + fileName;
var s3 = new AWS.S3({apiVersion: '2006-03-01'});
var params = {
Bucket: 'MY-BUCKET-NAME',
Key: fileName,
Body: file,
};
var s3 = new AWS.S3({apiVersion: '2006-03-01'});
var options = {partSize: 5 * 1024 * 1024, queueSize: 1};
s3.upload(params, options, function(err, data) {
if(err) {
alert('error');
} else{
alert('uploaded suceessfully')
};
});
console.log(s3)
}
};
</script>
This is the right approach as it doesn't load the browser at all but i cant get it to upload large files. Once I do find working Javascript code to upload large files I'll update this answer.
Edit:
My problem with uploading large files was my cors policy at Amazon AWS. But also when launched to production I found that Javascript AWS SDK does load the browser and bypass heroku 30 timeout. So I added some knowledge to the process and created a two step form upload process that pass the videos s3 url to another view which would reset the 30s timeout and upload the other information. Test it out on my site www.theraplounge.co/ I manually set the max file size to 500MB but I could be more.
I am trying to use the Storage Access API in plain old JavaScript inside of a modal. I am not using an iframe. All of the docs that I see online for the Storage Access API reference iframes. Does this mean the technology only works with iframes or can I use it in a regular javascript file?
I've tried attaching it to an onclick event in html and also creating it programatically with javascript, but neither of these seem to be working. I cannot get the "Do you want to allow 'video.example' to use cookies and website data while browsing 'news.example.com'" to show.
<button onlick="showSafariMessage()" type="button">Show Safari Message</div>
<script>
var showSafariMessage = function () {
document.hasStorageAccess().then(hasAccess => {
if (!hasAccess) {
return document.requestStorageAccess();
}
}).then((result) => {
// Now we have first-party storage access!
// Let's access some items from the first-party cookie jar
document.cookie = "foo=bar"; // set a cookie
localStorage.setItem("username", "John"); // access a localStorage entry
}).catch((error) => {
// error obtaining storage access.
});
}
</script>
I expect to see the Safari popup, but I am not. Please help!
I am trying to implement the Apache superset dashboard in a webpage.
Anyone have any idea how to implement this?
Keep the iframe tag line as you mentioned.
<iframe src="linkToYourDashBoard?standalone=true"></iframe>
and check the superset_config.py file.
HTTP_HEADERS = {'X-Frame-Options': 'SAMEORIGIN'}
Change the line to
HTTP_HEADERS = {'X-Frame-Options': 'ALLOWALL'}
or
HTTP_HEADERS = {}
Don't forget to add superset_config.py file to your python path.
First, you need to update the public roles with these options.
Security/List Roles:
can explore json on Superset,
can dashboard on Superset,
all database access on all_database_access
Second, embed your dashboard in your HTML
<iframe src="localhost:8088/superset/dashboard/5/?standalone=true"></iframe>
Superset Embedded SDK allows you to embed
dashboards from Superset into your own app, using your app's authentication.
superset backend server: update superset_config.py or config.py
FEATURE_FLAGS = {
"EMBEDDED_SUPERSET": True, # requirement
}
"GUEST_ROLE_NAME": "Public", # you might need to edit role permissions when 403 error
"GUEST_TOKEN_JWT_EXP_SECONDS": 300 # 5 minutes, or you could set it longer
your app's backend server
fetch access_token
http://localhost:8088/api/v1/security/login
fetch guest_token
http://localhost:8088/api/v1/security/guest_token/
your app's frontend, for example:
<script src="https://unpkg.com/#superset-ui/embedded-sdk"></script>
<script>
supersetEmbeddedSdk.embedDashboard({
id: 'd3918020-0349-435d-9277-xxxxxx', // given by the Superset embedding UI
supersetDomain: 'http://localhost:9000',
mountPoint: document.getElementById('container'), // any html element that can contain an iframe
fetchGuestToken: () =>
'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.xxxxxx.1RExnlLfdDI6P4vG3gB0otLL7XR_3OE2OZ0WhCKyTyE', // guest_token
dashboardUiConfig: {} // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
})
</script>
Please refer to: Embedding Superset dashboards in your React application
Superset now provides the Superset Embedded SDK, an NPM package for inserting an iframe that will embed your Superset dashboard. I'm using it at the moment and it is relatively straightforward; this is the current implementation example provided in the docs:
import { embedDashboard } from "#superset-ui/embedded-sdk";
embedDashboard({
id: "abc123", // given by the Superset embedding UI
supersetDomain: "https://superset.example.com",
mountPoint: document.getElementById("my-superset-container"), // any html element that can contain an iframe
fetchGuestToken: () => fetchGuestTokenFromBackend(),
dashboardUiConfig: { hideTitle: true }, // dashboard UI config: hideTitle, hideTab, hideChartControls (optional)
});
Obviously the end result could still be achieved by adding the iframe "manually," but using the official abstraction might provide simplicity and future functionality in subsequent versions.
I am looking for possibility of handling get and post requests made by running a java-script code after a website is loaded. Here is the description: a url could be loaded via QWebEnginePage::load and the page contains some buttons with javescript events bind to them. buttons do some get and post requests from internet. Is there anyway that I could signal my classes when the get and post requests are performed by that javascript events. If it is impossible with QWebEngine What are the other options in Qt to do job. I am looking for some options that would not be absolute in the future since it is part of long-term project.
Thanks
You can use QWebChannel that should work in your case.
CPP file
QWebChannel* webChannel = new QWebChannel();
webChannel->registerObject("foo", this);
webview->page()->setWebChannel(webChannel);
in HTML file
<script type="text/javascript" src="qrc:/Map/qwebchannel.js"></script>
<script type="text/javascript">
new QWebChannel(qt.webChannelTransport, function(channel) {
// all published objects are available in channel.objects under
// the identifier set in their attached WebChannel.id property
var foo = channel.objects.foo;
// access a property
alert(foo.hello);
// connect to a signal
foo.someSignal.connect(function(message) {
alert("Got signal: " + message);
});
// invoke a method, and receive the return value asynchronously
foo.someMethod("bar", function(ret) {
alert("Got return value: " + ret);
});
});
</script>
Suppose all that happens initially in a client swf is a user clicks a hyperlink in a text object of the swf, so this requests a "page" from the server. In response the server just modifies that existing swf in the client browser, by for example (?) invoking public functions of it, and possibly passing in as parameters the name of image or data files which were also downloaded in response to the URL request. The crucial part is that all that can happen initially in the SWF is a URL "page" request. Is this commonly done and if so, how.
Clicking on an hyperlink in AS3 will trigger a TextEvent.LINK event, you can then listen to this event and in your function proceed to call the relevant service which in turn will send you a response which you can use to update your swf data.
Check the docs here for the TextEvent class
http://www.adobe.com/livedocs/flash/9.0/ActionScriptLangRefV3/
Now, it all depends on what your link is, if it loads an XML ,then you can use the URLLoader class to load the XML data
private function init():void
{
var tf:TextField = new TextField();
tf.htmlText = "<a href='http://example.com/data.xml'>Update Data</a>";
tf.addEventListener(TextEvent.LINK, clickHandler);
addChild(tf);
}
private function clickHandler(e:TextEvent):void
{
trace(e.type); // link
trace(e.text); // http://example.com/data.xml
var loader:URLLoader = new URLLoader();
loader.addEventListener( Event.COMPLETE , dataLoaded );
loader.load( new URLRequest( e.text ) );
}
private function dataLoaded(event:Event):void
{
trace( event.target.data );// xml content
//from here you can then parse the XML & update your swf
}