Skip to content

GitLab

T
tangled
Commit 8b156314 authored by kcarattini's avatar kcarattini Committed by Commit bot
Browse files
Options

Adds hotwording assets and basic opt-in flow to the Hotword Audio Verification app. 

BUG=390086

Review URL: https://codereview.chromium.org/521483003

Cr-Commit-Position: refs/heads/master@{#293074}
parent 98913ef3
Hide whitespace changes
Inline Side-by-side
Showing with 535 additions and 6 deletions
chrome/browser/resources/component_extension_resources.grd
View file @ 8b156314
......@@ -62,6 +62,22 @@
<if expr="enable_extensions">
<!-- Hotword Audio Verification extension -->
<include name="IDR_HOTWORD_AUDIO_VERIFICATION_BACKGROUND_JS" file="hotword_audio_verification/event_page.js" type="BINDATA" />
<include name="IDR_HOTWORD_AUDIO_VERIFICATION_MAIN_JS" file="hotword_audio_verification/main.js" type="BINDATA" />
<include name="IDR_HOTWORD_AUDIO_VERIFICATION_FLOW_JS" file="hotword_audio_verification/flow.js" type="BINDATA" />
<include name="IDR_HOTWORD_ONLY_STEP_HTML" file="hotword_audio_verification/steps/hotword_only_step.html" flattenhtml="true" type="BINDATA" />
<include name="IDR_AUDIO_HISTORY_STEP_HTML" file="hotword_audio_verification/steps/audio_history_step.html" flattenhtml="true" type="BINDATA" />
<include name="IDR_HOTWORD_AUDIO_HISTORY_STEP_HTML" file="hotword_audio_verification/steps/hotword_audio_history_step.html" flattenhtml="true" type="BINDATA" />
<include name="IDR_SPEECH_TRAINING_STEP_HTML" file="hotword_audio_verification/steps/speech_training_step.html" flattenhtml="true" type="BINDATA" />
<include name="IDR_FINISHED_STEP_HTML" file="hotword_audio_verification/steps/finished_step.html" flattenhtml="true" type="BINDATA" />
<include name="IDR_HOTWORD_AUDIO_VERIFICATION_STYLE_CSS" file="hotword_audio_verification/style.css" type="BINDATA" />
<include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_CLOSE" file="hotword_audio_verification/images/bt-close-1x.png" type="BINDATA" />
<include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_HEADER" file="hotword_audio_verification/images/header-optin-1x.png" type="BINDATA" />
<include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_CHECK_BLUE" file="hotword_audio_verification/images/ic-check-blue-1x.png" type="BINDATA" />
<include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_CHECK_GRAY" file="hotword_audio_verification/images/ic-check-gray-1x.png" type="BINDATA" />
<include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_ERROR" file="hotword_audio_verification/images/ic-error-1x.png" type="BINDATA" />
<include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_MIC" file="hotword_audio_verification/images/mic-1x.png" type="BINDATA" />
<include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_LOADER" file="hotword_audio_verification/images/placeholder-loader-1x.png" type="BINDATA" />
<include name="IDR_HOTWORD_AUDIO_VERIFICATION_IMAGE_LOADER_ERROR" file="hotword_audio_verification/images/placeholder-loader-error-1x.png" type="BINDATA" />
<!-- Hotword Helper extension -->
<include name="IDR_HOTWORD_HELPER_AUDIO_CLIENT_JS" file="hotword_helper/audio_client.js" type="BINDATA" />
......
chrome/browser/resources/hotword_audio_verification/event_page.js
View file @ 8b156314
......@@ -7,8 +7,8 @@ chrome.app.runtime.onLaunched.addListener(function() {
'frame': 'none',
'resizable': false,
'bounds': {
'width': 710,
'height': 535
'width': 800,
'height': 600
}
});
});
chrome/browser/resources/hotword_audio_verification/flow.js 0 → 100644
View file @ 8b156314
// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
(function() {
// Correspond to steps in the hotword opt-in flow.
/** @const */ var HOTWORD_AUDIO_HISTORY = 'hotword-audio-history-container';
/** @const */ var HOTWORD_ONLY_START = 'hotword-only-container';
/** @const */ var AUDIO_HISTORY_START = 'audio-history-container';
/** @const */ var SPEECH_TRAINING = 'speech-training-container';
/** @const */ var FINISHED = 'finished-container';
/** @const */ var FLOWS = {
HOTWORD_AND_AUDIO_HISTORY: [
HOTWORD_AUDIO_HISTORY, SPEECH_TRAINING, FINISHED],
HOTWORD_ONLY: [HOTWORD_ONLY_START, SPEECH_TRAINING, FINISHED],
AUDIO_HISTORY_ONLY: [AUDIO_HISTORY_START]
};
/**
* Class to control the page flow of the always-on hotword and
* Audio History opt-in process.
* @constructor
*/
function Flow() {
this.currentStepIndex_ = -1;
this.currentFlow_ = [];
}
/**
* Gets the appropriate flow and displays its first page.
*/
Flow.prototype.startFlow = function() {
this.currentFlow_ = getFlowForSetting_.apply(this);
this.advanceStep();
};
/**
* Advances the current step.
*/
Flow.prototype.advanceStep = function() {
this.currentStepIndex_++;
if (this.currentStepIndex_ < this.currentFlow_.length)
showStep_.apply(this);
};
// ---- private methods:
/**
* Gets the appropriate flow for the current configuration of settings.
* @private
*/
getFlowForSetting_ = function() {
// TODO(kcarattini): This should eventually return the correct flow for
// the current settings state.
return FLOWS.HOTWORD_AND_AUDIO_HISTORY;
};
/**
* Displays the current step. If the current step is not the first step,
* also hides the previous step.
* @private
*/
showStep_ = function() {
var currentStep = this.currentFlow_[this.currentStepIndex_];
var previousStep = null;
if (this.currentStepIndex_ > 0)
previousStep = this.currentFlow_[this.currentStepIndex_ - 1];
if (previousStep)
document.getElementById(previousStep).hidden = true;
document.getElementById(currentStep).hidden = false;
};
window.Flow = Flow;
})();
chrome/browser/resources/hotword_audio_verification/main.html
View file @ 8b156314
<!DOCTYPE html>
<html>
<!DOCTYPE HTML>
<html i18n-values="dir:textdirection">
<head>
<meta charset=utf-8>
<title></title>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="chrome://resources/js/util.js"></script>
<script src="flow.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="steps">
<!-- TODO(kcarattini): Localize the strings in the following files. -->
<include src="steps/hotword_only_step.html">
<include src="steps/audio_history_step.html">
<include src="steps/hotword_audio_history_step.html">
<include src="steps/speech_training_step.html">
<include src="steps/finished_step.html">
</div>
</body>
</html>
chrome/browser/resources/hotword_audio_verification/main.js 0 → 100644
View file @ 8b156314
// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
var appWindow = chrome.app.window.current();
document.addEventListener('DOMContentLoaded', function() {
var flow = new Flow();
flow.startFlow();
// Make the close buttons close the app window.
var closeButtons = document.getElementsByClassName('close');
for (var i = 0; i < closeButtons.length; ++i) {
var closeButton = closeButtons[i];
closeButton.addEventListener('click', function(e) {
appWindow.close();
e.stopPropagation();
});
}
$('ah-cancel-button').addEventListener('click', function(e) {
appWindow.close();
e.stopPropagation();
});
$('hw-cancel-button').addEventListener('click', function(e) {
appWindow.close();
e.stopPropagation();
});
$('st-cancel-button').addEventListener('click', function(e) {
appWindow.close();
e.stopPropagation();
});
$('ah-agree-button').addEventListener('click', function(e) {
// TODO(kcarattini): Set the Audio History setting.
appWindow.close();
e.stopPropagation();
});
$('hw-agree-button').addEventListener('click', function(e) {
// TODO(kcarattini): Set the Audio History setting.
flow.advanceStep();
e.stopPropagation();
});
// TODO(kcarattini): Remove this once speech training is implemented. The
// way to get to the next page will be to complete the speech training.
$('training').addEventListener('click', function(e) {
// TODO(kcarattini): Set the always-on-hotword setting.
flow.advanceStep();
e.stopPropagation();
});
$('try-now-button').addEventListener('click', function(e) {
// TODO(kcarattini): Figure out what happens when you click this button.
appWindow.close();
e.stopPropagation();
});
});
chrome/browser/resources/hotword_audio_verification/manifest.json
View file @ 8b156314
......@@ -8,6 +8,11 @@
"background": {
"scripts": ["event_page.js"],
"persistent": false
}
}
},
"content_security_policy": "default-src 'self'; script-src 'self' chrome://resources"
},
"permissions": [
"chrome://resources/"
],
"display_in_launcher": false
}
chrome/browser/resources/hotword_audio_verification/steps/audio_history_step.html 0 → 100644
View file @ 8b156314
<div id="audio-history-container" hidden>
<div class="container">
<div class="header">
<span class="close"></span>
<div class="header-text">
<h1>Enable Audio History</h1>
</div>
</div>
<div class="content">
<div class="col-3">
<h4>To make this happen, you agree that</h4>
When you use voice activation commands, such as "Ok Google" or
touching a microphone icon, a recording of the next thing you say,
plus a few seconds before, may be used and stored by Google and
associated with your Google Account to help recognize your voice and
improve speech recognition.
<br>
<a href="#" class="link-button">LEARN MORE</a>
</div>
</div>
<div class="buttonbar">
<button id="ah-agree-button" class="primary">I AGREE</button>
<button id="ah-cancel-button" >NO THANKS</button>
</div>
</div>
</div>
chrome/browser/resources/hotword_audio_verification/steps/finished_step.html 0 → 100644
View file @ 8b156314
<div id="finished-container" hidden>
<div class="container">
<div class="header">
<span class="close"></span>
<div class="header-text">
<div class="v-spacing-for-no-subheading"></div>
<h1>All set!</h1>
</div>
</div>
<div class="content">
<div class="col-3">
<h4>Your Chromebook can now:</h4>
<div class="check">
<span class="icon"></span>
<span class="text">
Recognize your voice when you say 'Ok Google'
</span>
</div>
<div class="check">
<span class="icon"></span>
<span class="text">
Respond to 'Ok Google' when the screen is on
</span>
</div>
You can change these settings at any time in the
<a href="#">Chrome Settings</a>
</div>
</div>
<div class="buttonbar">
<button id="try-now-button" class="primary">OK, TRY IT NOW</button>
</div>
</div>
</div>
chrome/browser/resources/hotword_audio_verification/steps/hotword_audio_history_step.html 0 → 100644
View file @ 8b156314
<div id="hotword-audio-history-container" hidden>
<div class="container">
<div class="header">
<span class="close"></span>
<div class="header-text">
<h1>Voice search at any time</h1>
<h2>Say 'Ok Google' any time your screen is on</h2>
</div>
</div>
<div class="content">
<div class="col-3">
<h4>To make this happen, you agree that</h4>
When you use voice activation commands, such as "Ok Google" or
touching a microphone icon, a recording of the next thing you say,
plus a few seconds before, may be used and stored by Google and
associated with your Google Account to help recognize your voice and
improve speech recognition.
<br>
<a href="#" class="link-button">LEARN MORE</a>
</div>
</div>
<div class="buttonbar">
<button id="hw-agree-button" class="primary">I AGREE</button>
<button id="hw-cancel-button" >NO THANKS</button>
</div>
</div>
</div>
chrome/browser/resources/hotword_audio_verification/steps/speech_training_step.html 0 → 100644
View file @ 8b156314
<div id="speech-training-container" hidden>
<div class="mic"></div>
<div class="container">
<div class="header">
<span class="close"></span>
<div class="header-text">
<div class="v-spacing-for-no-subheading"></div>
<h1>Let's train your Chromebook</h1>
</div>
</div>
<div id="training" class="content">
<div class="col-2">
To help Google respond to you and for reliable and easy access to
voice search, you need to teach Google the sound of your voice.
<br>
<h4>Just say 'Ok Google' three times</h4>
</div>
<div class="col-spacing"></div>
<div class="col-2">
<div class="train listening">
<span class="icon"></span>
<span class="text">Say 'Ok Google'</span>
</div>
<div class="train not-started">
<span class="icon"></span>
<span class="text">Say 'Ok Google' again</span>
</div>
<div class="train not-started">
<span class="icon"></span>
<span class="text">Say 'Ok Google' one last time</span>
</div>
</div>
</div>
<div class="buttonbar">
<button id="st-cancel-button">FINISH LATER</button>
</div>
</div>
</div>
chrome/browser/resources/hotword_audio_verification/style.css 0 → 100644
View file @ 8b156314
/* Copyright 2014 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
* {
box-sizing: border-box;
color: rgba(0, 0, 0, .87);
font-family: Helvetica, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
}
a {
color: rgb(67, 133, 244);
text-decoration: none;
}
body {
background: #ddd;
}
h1 {
font-size: 34px;
font-weight: normal;
line-height: 40px;
}
h2 {
font-size: 16px;
font-weight: normal;
}
h4 {
font-size: 14px;
}
div.container {
background: #fff;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
height: 600px;
width: 800px;
}
div.header {
background: url(../images/header-optin-1x.png) no-repeat;
height: 240px;
vertical-align: bottom;
}
div.header-text {
height: 240px;
padding: 60px;
}
div.header-text h1 {
color: #fff;
margin-top: 44px;
}
div.header-text h2 {
color: #fff;
margin-top: 20px;
}
div.content {
height: 240px;
margin: 60px 60px auto 60px;
}
.close {
background: url(../images/bt-close-1x.png);
float: right;
height: 60px;
width: 60px;
}
button.grayed-out {
color: rgba(0, 0, 0, .28);
}
.col-3 {
color: rgba(0, 0, 0, .54);
line-height: 24px;
width: 504px;
}
.col-3 h4 {
line-height: 100%;
margin-bottom: 27px;
}
.col-2 {
color: rgba(0, 0, 0, .54);
float: left;
line-height: 24px;
width: 332px;
}
.col-2 h4 {
line-height: 100%;
margin-top: 27px;
}
.col-spacing {
float: left;
height: 160px;
width: 16px;
}
a.link-button {
display: inline-block;
font-size: 14px;
margin-top: 22px;
text-decoration: none;
text-transform: uppercase;
}
div.buttonbar {
background: rgba(0, 0, 0, .06);
height: 60px;
padding: 12px 60px;
}
.buttonbar button {
background: none;
border: none;
border-radius: 2px;
float: right;
height: 36px;
margin-left: 8px;
min-width: 88px;
padding: 8px;
text-transform: uppercase;
}
button.primary {
color: rgb(67, 133, 244);
}
.v-spacing-for-no-subheading {
height: 43px;
}
.train {
clear: both;
margin-bottom: 24px;
white-space: nowrap;
}
.train .icon {
display: inline-block;
height: 24px;
margin-right: 16px;
vertical-align: top;
width: 24px;
}
.train .text {
display: inline-block;
line-height: 24px;
vertical-align: top;
width: 292px;
}
.train.listening .text {
color: rgba(0, 0, 0, .87);
}
.train.not-started .text {
color: rgba(0, 0, 0, .54);
}
.train.recorded .text {
color: rgba(66, 133, 244, 1);
}
.train.error .text {
color: rgb(213, 0, 0);
}
.train.listening .icon {
background: url(../images/placeholder-loader-1x.png) no-repeat;
}
.train.not-started .icon {
background: url(../images/ic-check-gray-1x.png) no-repeat;
}
.train.recorded .icon {
background: url(../images/ic-check-blue-1x.png) no-repeat;
}
.train.error .icon {
background: url(../images/placeholder-loader-error-1x.png) no-repeat;
}
.mic {
background: url(../images/mic-1x.png) no-repeat;
height: 80px;
left: 666px;
position: absolute;
top: 200px;
width: 80px;
}
.check {
clear: both;
height: 24px;
margin-bottom: 24px;
}
.check .icon {
background: url(../images/ic-check-blue-1x.png) no-repeat;
display: inline-block;
height: 24px;
margin-right: 16px;
vertical-align: top;
width: 24px;
}
.check .text {
color: rgba(0, 0, 0, .54);
display: inline-block;
height: 24px;
line-height: 24px;
vertical-align: top;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment