Skip to content

Update index.html #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Twist1154 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update index.html #23

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 38 additions & 60 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,111 +1,89 @@
<html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="js/houndify.js"></script>
<link
href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/364c1db764.js"
crossorigin="anonymous"
></script>
<title>Houndify Demo</title>
</head>

<body class="bg-gray-100 min-h-screen">
<div class="m-auto max-w-3xl bg-white py-12 px-6">
<h2 class="text-3xl font-bold mb-6">Houndify JavaScript SDK Demo</h2>
<p class="pb-2">
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-6">
<div class="max-w-3xl w-full bg-white shadow-lg rounded-lg p-8">
<h2 class="text-3xl font-bold text-gray-800 mb-6 text-center">
Houndify JavaScript SDK Demo
</h2>
<p class="text-gray-700 mb-4">
This example demonstrates how to query the Houndify SDK using text and
voice requests. The example is built in vanilla JavaScript and can be
ported to other JavaScript frameworks.
</p>

<h2 class="text-lg font-bold mt-6">Setup</h2>
<p class="pb-2">
To setup this example, you need to add your Houndify Client ID into the
HTML file. You can get your free Client ID by creating an account on
<a class="text-blue-500" href="https://houndify.com">www.houndify.com</a
>. Refer to the
<a
class="text-blue-500"
href="https://github.com/soundhound/hound-sdk-web-example/blob/master/README.md"
>README.md</a
>
for more information.
voice requests.
</p>
<p class="pb-2">
Once you have entered in your Client ID, click on the microphone to make
a voice query (ex: <i>"What's the weather in Toronto"</i>), or type it
into the input box and click on the search button. You'll see a JSON
response in the <strong>Response JSON</strong> box below.
</p>

<div id="status" class="bg-blue-100 text-blue-700 p-4 my-4 rounded">
<div class="text-xs font-bold text-blue-700">Status</div>
<p class="text-sm">
Click on the Mic and say a voice query, or type in the text query into
the input box.
</p>
<div class="bg-blue-100 text-blue-700 p-4 rounded-md mb-6">
<p class="font-semibold">Status:</p>
<p id="status" class="text-sm">Ready to receive input.</p>
</div>

<form id="form" action="javascript:void(0);">
<div class="p-6 bg-gray-200 my-12 shadow-xl rounded">
<form id="form" class="space-y-4" action="javascript:void(0);">
<div class="flex items-center space-x-4 bg-gray-200 p-4 rounded-lg">
<button
id="voiceIcon"
class="text-lg bg-gray-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-12 h-12"
class="bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full focus:outline-none focus:ring"
onclick="onMicrophoneClick()"
>
<i class="fas fa-microphone"></i>
</button>
<input
id="query"
type="text"
placeholder="Click on a microphone icon or type in your query..."
class="text-xl appearance-none border rounded p-2 w-3/4 text-gray-700 h-12 focus:outline-none focus:shadow-outline"
placeholder="Type or use the mic..."
class="flex-1 border rounded-lg p-2 text-gray-700 focus:ring focus:ring-blue-300"
/>
<button
id="textSearchButton"
class="text-lg bg-gray-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded w-12 h-12"
class="bg-green-600 hover:bg-green-700 text-white p-3 rounded-full focus:outline-none focus:ring"
onclick="initTextRequest()"
>
<i class="fas fa-search"></i>
</button>
</div>

<div>
<h3 class="text-lg font-bold">Audio upload</h3>
<label class="ui label block" for="file"
>Upload a recorded voice query from a file.</label
<label class="block text-gray-700 font-semibold mb-2"
>Upload Audio Query:</label
>
<input
type="file"
id="file"
name="file"
class="w-full p-2 border rounded-lg focus:ring focus:ring-blue-300"
onchange="onFileUpload()"
class="bg-gray-200 hover:bg-gray-400 py-2 px-4 rounded block my-4"
/>
</div>

<div class="flex mb-4">
<div class="w-1/2 h-12">
<h5>Response JSON</h5>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<h3 class="text-lg font-bold text-gray-800 mb-2">Response JSON</h3>
<textarea
id="responseJSON"
class="w-full h-48 font-mono text-xs"
placeholder="Make a query to view the response JSON here."
class="w-full h-48 p-2 text-xs border rounded-lg bg-gray-50"
placeholder="Response JSON will appear here..."
></textarea>
</div>
<div class="w-1/2 h-12">
<h5>Search info object</h5>
<div>
<h3 class="text-lg font-bold text-gray-800 mb-2">Search Info</h3>
<textarea
id="infoJSON"
class="w-full h-48 font-mono text-xs"
placeholder="Make a query to view the search information JSON object here."
class="w-full h-48 p-2 text-xs border rounded-lg bg-gray-50"
placeholder="Search info JSON will appear here..."
></textarea>
</div>
</div>
</form>
</div>
</body>
</html>


<script>
//HTML ELEMENTS FOR DISPLAYING RESPONSE AND INFO JSON's
Expand All @@ -117,7 +95,7 @@ <h5>Search info object</h5>

// UPDATE YOUR CLIENT ID HERE TO YOUR HOUNDIFY.COM CLIENT ID.
// > [INSERT CLIENT ID BELOW]
const clientID = "YOUR_CLIENT_ID";
const clientID = "r6edXhzRuwacGcf--kqqkA==";
let conversationState = null;
let voiceRequest = null;

Expand Down