Lab+III

Lab III: Make An Avatar for Your Bot.
To deploy our ChatBot, we must create an avatar and give it a voice, a combination that SitePal calls a "scene". Below, for an example, is scene of the Young Steve Jobs created by one of your instructors using the publicity photo of Mr. Jobs at left: (Note: This scene includes sound: you need headphones or speakers to listen to it.)
 * **Real Steve Jobs** || **Fake Steve Jobs** ||
 * [[image:Real_Steve.jpg]] || media type="custom" key="8254392" ||

How is this done? Below, in bold, are the steps we followed. Important: Please use Internet Explorer to do this lab rather than Firefox. Otherwise you will run into some problems with SitePal's editors that show up in Firefox (SitePal's fault, by the way: not Mozilla's).


 * 1. Have your Teacher Assign You A Web Page and Two-Digit ID**. Check with yor instructor about a web page on which to embed your finished character (A page in this wiki is ideal: easy and convenient). You'll also need a unique two-digit ID number that you can use to save your work.


 * 2. Download the Real Steve's Photo (Above) To Your Desktop.**. To do this, right-click the photo above and choose Save Image As... Navigate to your Desktop and save the photo.


 * 3. Log in to Mr. Creamer's SitePal Account.** First, surf to http://www.sitepal.com/login For Email, enter creamerj@roadrunner.com. For Password, enter sitepal. Click Login.


 * 4. Add a new Scene to Mr. Creamer's Account.** Click the Enter button in the middle of the page. The Edit Scenes Screen will appear. Either click the first available icon that says "Click here to edit", or if none is available, click the button that says "Add Scene". A Let's Get Started! window will open, with a female character speaking. You don't need to listen to what she says: you can proceed by simply clicking Models, button 1.


 * 5. Create and Save a 3D PhotoFace for Steve.** Find the tab at the top of the window that says 3D Photoface and click it. The click the button, Create Your Own, which appears beneath it. Put a checkmark beside "I agree to the terms and conditions." Then click Browse. Navigate to and upload the Real Steve photo from your Desktop. When Steve's face appears, click Zoom Out to for a better view of his full face. At this point you can make adjustments to center his photo and/or straighten it. If everything looks OK, click Next, and move the crosshairs to to select:
 * The tip of Steve's chin
 * The corners of his mouth
 * The places where his ears join his head.
 * The tip of his nose
 * The center of each of his eyes.

When you have correctly placed the crosshairs, it's time to help SitePal crop out the background in the photo (the parts of the image behind Steve). To do that, move the blue crop points to closely enclose Steve's head, hair, and ears (you can also add and delete new points--do you see the directions?). .

With the background cropped out, click Next: SitePal will process a bit, then reload the character. Use the slider on the new window to choose a nice, bright, toothy grin for Steve. Choose the Male gender for your Character, and name him Steve##, where ## is the two-digit ID number that your instructor gave you. Click Save, and SitePal will save your character. When this process is complete, click Button 2, Accessories.


 * 6. Choose a Baseline Facial Expression.** Although you cannot add objects to a 3D PhotoFace, you CAN select a baseline facial expression. Try out the expressions by clicking the buttons provided: None? Sad? Angry? Disgusted? Surprised? Thinking? Smiling? Happy? lol. To me, Steve looks very presentable with the wide eyes and open mouth of Surprised :). So you might try that one.


 * 7. Choose a Visual Background.** Now click Backgrounds, button 3. Where would you like to interview Steve? Whatever he is, he is a consummate businessman. So, in the drop-down Category menu, choose Business, and a number of business backgrounds will appear. To me, the Office4 environment seems like a place where both Steve, and web visitors, might feel at home. Select it, then use the magnifying glass and arrow icons below Steve's face to size and position his head appropriately in the frame.


 * 8. Key in Answers to Anticipated Questions.** Next click Audios, button 4, and choose the tab marked TTS (text-to-speech).

In the text box that appears, key in the following message: "Hi! I'm Steve Jobs. And welcome to the company I built with Steve Wozz knee ak, which is Apple Computer. I am very proud of what we've accomplished. Ask me what's on your mind!" For Voice, choose Paul (US). Then click the Preview button to hear Steve say what you typed. When Steve quits speaking, type the word Welcome where it says Name Your Audio, and click Save. The Welcome message will be saved.

A question suggested by the Welcome message is, "What have you accomplished?" To accommodate that question, key in and save another text-to-speech message, as follows: "Our Apple Two computer was a big hit in schools, and both businesspeople and artists love our Macintosh computer. We are also the creators of the eye Pod, eye Phone, eye Pad, and eye Tunes. You can see we have a lot to be proud of!" Again click the Preview button, and (once Steve has finished speaking), again click Save.

Once you've typed each question, it's important that you link it to the correct audio! To do this, click the Select Audio button and click Select for the corresponding TTS clip, which you created and saved earlier. (For "Who are you?", that would be the Welcome message.)
 * 9. Choose a Player, then Link Questions to Your Previously-Keyed Answers.** Now click Players, button 5. A Player is a "skin" that surrounds your Scene and gives it certain capabilities. For this Lab, choose FAQ from the Function drop-down menu and select the Glossy FAQ skin. Next, click the Functions (FAQ) tab at top, and click the ADD button to type in the following questions:
 * Who are you?
 * What did you accomplish?


 * 10. Save the Scene.** With your questions and answers linked, it's time to click Save Scene. When you do this, a Notice will appear having to do with old HTML code for Oddcast. You can safely ignore this. The Edit Scene window will reappear. When it does, please add a title to the Scene and click the green Save all Changes button to save it. Click the Preview button to check out your scene as it will appear to visitors; If all is well, it's time to Publish.


 * 11. Publish the Scene.** Click the yellow Publish button, then click Continue Publishing. Choose the first button, Embed in Web Page. Use the zoom and arrow buttons below Steve's head to re-size and re-position Steve's head. In the left-hand window, Embed Within Your Web Page, click the Click Here to Embed button. In Box 1, Publish To, be sure Standard Web Page is selected. Note the embed code in Box 4, Copy the Code, then Paste Into Your Page. What you do next will depend on how the web page that you will use is hosted. If it's a page in this wiki, log in as a wiki member and do the following:
 * Click the Edit This Page button to go into edit mode.
 * Click to put a blinking cursor on the page where you want the video to appearl.
 * Click the Widget button in the editor toolbar.
 * Choose Other HTML (at the bottom of the widget list).
 * Paste the embed code into the empty text box, then click Save.
 * Close the page editor by clicking Save again.
 * Voila! Your new character loads and gives the Welcome message.


 * 12. Evaluation.** Briefly respond to the following questions in your Class Notebook. Or you may email your answers to the instructor.
 * Was creating this chatbot fun? Tell why or why not.
 * Which steps above were most difficult to follow, for you.
 * How might sitepal have made the process easier? Please share your ideas.