Hello, if you have any need, please feel free to consult us, this is my wechat: wx91due

Make a new document using the naming convention HWFinal-MUid.docx (example: HWFinal-johnsok9.docx). Objective: The objective of this exercise is to: Use all the skills learned in the entire course. Submit: screenshots, your word document, html files and links to your web page(s) You may discuss the concepts with your fellow students You may not show or share code with your fellow students, except your partner You may not show or share code with internet sources You may discuss this with your instructor or TA.

 

NOTE: This assignment includes a mandatory presentation by you to the Professor, along with submission to canvas. Any assignments which are not presented will receive Zero for the entire assignment. This must be working on your openstack instance.

The programming part of the final project is a three-page website. An introduction (landing) page, an AI front-end page, and a history page. These pages are described below.  Any sections which are left out (such as the actual layout of the page) are up to your discretion.

Part #1: Create GitLab project

Estimated time: .5 – 2 hours

Exercise: 

· Gitlab

o Follow lab assignment for this part

o Create your final project in gitlab (one person only)

§ Share this with your partner

o Clone it into your ~ubuntu directory

o Note: you and your partner will work together. Make sure you both have access to one OpenStack server, and the git repository (so you can show this later)

· Project

o Make certain docker, apache, database, phpliteadmin, password protection are all working

Part #2: Landing Pages and Structure

Estimated time: 3-8 hours

Exercise: 

The initial section of the assignment will involve the creation of a sophisticated web client that functions across multiple pages or tabs. This client will be developed using a combination of HTML, JavaScript, jQuery, Bootstrap, and CSS. Aesthetics and functionality are paramount; hence, the website should not only be visually appealing but also fully responsive. Bootstrap will serve as the foundation for layout and styling, while additional custom CSS will be applied to enhance its visual appeal.

The website must be capable of graceful degradation. This will be assessed by progressively reducing the display size from a standard desktop monitor to a mobile phone screen. Graceful degradation refers to the website's ability to adapt its layout - for instance, reorganizing content from a three-column layout to a single-column layout to maintain usability and design integrity on smaller screens. Mere reduction in size does not constitute graceful degradation. Should there be any uncertainty regarding these requirements, further clarification should be sought.

Note: Everything you write must use the following (from exam2)

· Concepts

o Html

o CSS

o JavaScript

o Bootstrap (must be responsive)

o jQuery

§ do NOT use document.getElementByID

o Ajax

§ Must use our in-class concepts (.done and .fail)

· Style

o Good looking using CSS

o All CSS, ajax, JavaScript must be external files

o Every page (including the menu) must include more than one picture that integrate well into the web page

· Location

o All code MUST be working on your openstack instance http server

o All code must be in git

· Ajax

o You are to write all code using the jQuery Ajax routines as done in the lecture, labs, and homework. Some examples on the internet may use other methods, notably the fetch command.  You may use those as an example to review, but you MUST use the $.ajax call (with .done() and .fail() ) for credit.

The menu must provide the following items.

· Menu of pages you are providing (with a mechanism to switch pages) You are to research and decide on your own mechanism to provide the front-end menu of pages.

o This was not covered in class.  However, you have already seen web sites for research which included them.

o Do NOT just add buttons or links to the top of a page (hint: nav), you must use a navigation element (navbar)

· 5 Pages

o Landing page for the project

§ Include picture and explanation of your system

§ Team information (name, class, assignment etc…)

o Person 1 page with their info

o Person 2 page with their info

o AI Front End

o AI History, filter and display

 

Part #3: AI App (using api.clearllc.com, and your OpenStack rest server using SqlLite)

Estimated time: 5-15 hours

Exercise: 

· Load the user level dropdowns

· Get user input

· Create request to API

· Get response

· Log response to your database

· Display response

a. Database Tables

i. Level

ii. log

b. API functions (using the given Rest PHP code)

i. Get list of user types and system prompts

ii. Log Api call and results

iii. Get conversation log

iv. Get conversation details

Part #4: Request History

Estimated time: 4-8 hours

Exercise: 

Provide a page which displays the history of AI lookups

User should be able to select a date

§ Should show a summary of all requests

· Change sort order

o Date/time

o Cost

o ? (some other criteria you decide)

· Show Date, prompt preview, cost

· Selecting a request should show the entire set of data

o Date/time (show EST, not UTC)

o Input from user

o Computer created prompt

o Response from AI

o Tokens and cost

§ Show total tokens in/out and cost for the day

§ 

Part #5: Each person must write their own Word Document

Estimated time: 45 minutes (note: a 2 minute word document will be graded appropriately)

Exercise: 

 

· Make sure it includes your name, class, assignment etc…

 

· Explain (relating to this assignment and the entire course) in full paragraphs with full sentences for full credit.

o what worked

o what didn’t

o how long it took

o What you liked

o What you didn’t

SUBMIT:

· Word Document

· Mandatory Presentation of working system in zoom session

· Upload all code

· Git all code

· Paste the URL of your menu page into the submission as a comment