Add sim-to-real transfer

.gitignore

@@ -0,0 +1 @@
+*.pyc

app.py

@@ -2,6 +2,9 @@ import gradio as gr
 import torch
 from transformers import BartTokenizer, BartForConditionalGeneration, AutoModel, AutoTokenizer
 
+from webshop_lite import dict_to_fake_html
+from predict_help import convert_dict_to_actions, convert_html_to_text, parse_results, parse_item_page, Page
+
 # load IL models
 bart_tokenizer = BartTokenizer.from_pretrained('facebook/bart-large')
 bart_model = BartForConditionalGeneration.from_pretrained('webshop/il_search_bart')
@@ -85,17 +88,142 @@ def predict(obs, info):
     if valid_acts[0].startswith('click['):
         return bert_predict(obs, info)
     else:
-        return bart_predict(process_goal(obs))
+        return "search[" + bart_predict(process_goal(obs)) + "]"
 
+NUM_PROD_LIMIT = 10
 
-def run_episode(goal):
+def run_episode(goal, verbose=True):
     """
     Interact with amazon to find a product given input goal.
     Input: text goal
     Output: a url of found item on amazon.
     """
-    return bart_predict(goal)  # TODO: implement run_episode
-
-
-gr.Interface(fn=run_episode, inputs=gr.inputs.Textbox(
-    lines=7, label="Input Text"), outputs="text").launch(inline=False)
+    obs = "Amazon Shopping Game\nInstruction:" + goal + "\n[button] search [button]"
+    info = {'valid': ['search[stuff]'], 'image_feat': torch.zeros(512)}
+    product_map = {}
+    page_to_product_map_memo = {}
+    visited_asins, clicked_options = set(), set()
+    arg, sub_page_type, page_type, page_num = None, None, None, None
+    search_terms, prod_title, asin, num_prods, = None, None, None, None
+    options = {}
+    
+    for i in range(100):
+        # Run prediction
+        action = predict(obs, info)
+        if verbose:
+            print("====")
+            print(action)
+        
+        # Previous Page Type, Action -> Next Page Type
+        action_content = action[action.find("[")+1:action.find("]")]
+        prev_page_type = page_type
+        if action.startswith('search['):
+            page_type = Page.RESULTS
+            search_terms = action_content
+            page_num = 1
+        elif action.startswith('click['):
+            if action.startswith('click[item -'):
+                prod_title = action_content[len("item -"):].strip()
+                found = False
+                for value in product_map.values():
+                    if prod_title == value["Title"]:
+                        asin = value["asin"]
+                        page_type = Page.ITEM_PAGE
+                        visited_asins.add(asin)
+                        found = True
+                        break
+                if not found:
+                    raise Exception("Product to click not found")
+                    
+            elif any(x.value in action for x in [Page.DESC, Page.FEATURES, Page.REVIEWS]):
+                page_type = Page.SUB_PAGE
+                sub_page_type = Page(action_content.lower())
+                
+            elif action == 'click[< prev]':
+                if sub_page_type is not None:
+                    page_type, sub_page_type = Page.ITEM_PAGE, None
+                elif prev_page_type == Page.ITEM_PAGE:
+                    page_type = Page.RESULTS
+                    options, clicked_options = {}, set()
+                elif prev_page_type == Page.RESULTS and page_num > 1:
+                    page_type = Page.RESULTS
+                    page_num -= 1
+                    
+            elif action == 'click[next >]':
+                page_type = Page.RESULTS
+                page_num += 1
+                
+            elif action.lower() == 'click[back to search]':
+                page_type = Page.SEARCH
+                
+            elif action == 'click[buy now]':
+                return asin
+            
+            elif prev_page_type == Page.ITEM_PAGE:
+                found = False
+                for opt_name, opt_values in product_map[asin]["options"].items():
+                    if action_content in opt_values:
+                        options[opt_name] = action_content
+                        page_type = Page.ITEM_PAGE
+                        clicked_options.add(action_content)
+                        found = True
+                        break
+                if not found:
+                    raise Exception("Unrecognized action: " + action)
+        else:
+            raise Exception("Unrecognized action:" + action)
+        
+        if verbose:
+            print(f"Parsing {page_type.value} page...")
+        
+        # URL -> Real HTML -> Dict of Info
+        if page_type == Page.RESULTS:
+            if search_terms not in page_to_product_map_memo or page_num not in page_to_product_map_memo[search_terms]:
+                product_map = {}
+                asins = parse_results(search_terms, page_num)
+                num_prods = len(asins)
+                for asin_ in asins[:NUM_PROD_LIMIT]:
+                    product_map[asin_] = parse_item_page(asin_)
+                if search_terms not in page_to_product_map_memo:
+                    page_to_product_map_memo[search_terms] = {}
+                page_to_product_map_memo[search_terms][page_num] = product_map
+            else:
+                if verbose:
+                    print("Loaded memoized search results (" + str(page_num) + ")...")
+                product_map = page_to_product_map_memo[search_terms][page_num]
+            if verbose:
+                print("Product Map Length:", len(product_map))
+            data = list(product_map.values())
+        elif page_type == Page.ITEM_PAGE or page_type == Page.SUB_PAGE: 
+            data = product_map
+        elif page_type == Page.SEARCH:
+            if verbose:
+                print("Executing search")
+            obs = "Amazon Shopping Game\nInstruction:" + goal + "\n[button] search [button]"
+            info = {'valid': ['search[stuff]'], 'image_feat': torch.zeros(512)}
+            continue
+        else:
+            raise Exception("Page of type `", page_type,value, "` not found")
+
+        # Dict of Info -> Fake HTML -> Text Observation
+        html_str = dict_to_fake_html(data, page_type, asin, sub_page_type, options, product_map, goal)
+        obs = convert_html_to_text(html_str, simple=False, clicked_options=clicked_options, visited_asins=visited_asins)
+        
+        # Dict of Info -> Valid Action State (Info)
+        info = convert_dict_to_actions(page_type, data, asin, page_num, num_prods)
+        
+        if i == 99:
+            return asin
+
+gr.Interface(fn=run_episode,\
+    inputs=gr.inputs.Textbox(lines=7, label="Input Text"),\
+    outputs="text",\
+    examples=[
+        "I am looking for a high power sound column subwoofer, that uses bluetooth and is also a 3d surround sound system, and price lower than 650.00 dollars",
+        "Please select a 1 pound, certified organic sea salt shaker in the flavor triple blend flakes, and price lower than 40.00 dollars",
+        "I want to find a gold floor lamp with a glass shade and a nickel finish that i can use for my living room, and price lower than 270.00 dollars"
+    ],\
+    title="WebShop",\
+    article="<p style='padding-top:15px;text-align:center;'>To learn more about this project, check out the <a href='https://webshop-pnlp.github.io/' target='_blank'>project page</a>!</p>",\
+    description="<p style='text-align:center;'>Imitation Learning agent that searches for the desired product on Amazon from any natural language query!</p>",\
+).launch(inline=False)

predict_help.py

@@ -0,0 +1,205 @@
+from bs4 import BeautifulSoup
+from bs4.element import Comment
+from enum import Enum
+from urllib.parse import urlencode
+
+import json, requests, torch
+
+class Page(Enum):
+    DESC = "description"
+    FEATURES = "features"
+    ITEM_PAGE = "item_page"
+    RESULTS = "results"
+    REVIEWS = "reviews"
+    SEARCH = "search"
+    SUB_PAGE = "item_sub_page"
+
+HEADER_ = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36'
+DEBUG_HTML = "temp.html"
+VERBOSE = True
+
+API = '85956985fae328bfe5a759a2984448d2' 
+def get_url(url):
+    payload = {'api_key': API, 'url': url , 'country_code': 'us'}
+    proxy_url = 'http://api.scraperapi.com/?' + urlencode(payload)
+    return proxy_url
+
+# Query -> Search Result ASINs
+def parse_results(query, page_num=None):
+    url = 'https://www.amazon.com/s?k=' + query.replace(" ", "+")
+    if page_num is not None:
+        url += "&page=" + str(page_num)
+    if VERBOSE:
+        print("Action URL: ", get_url(url))
+    webpage = requests.get(get_url(url), headers={'User-Agent': HEADER_, 'Accept-Language': 'en-US, en;q=0.5'})
+    asins = []
+    soup = BeautifulSoup(webpage.content, 'html.parser')
+    products = soup.findAll('div', {'data-component-type': 's-search-result'})
+    if products is None:
+        temp = open(DEBUG_HTML, "w")
+        temp.write(str(soup))
+        temp.close()
+        raise Exception("Couldn't find search results page, outputted html for inspection")
+    for product in products:
+        asins.append(product['data-asin'])
+    if VERBOSE:
+        print("Scraped", len(asins), "products")
+    return asins
+
+# Scrape information of each product
+def parse_item_page(asin):
+    product_dict = {}
+    product_dict["asin"] = asin
+
+    url = f"https://www.amazon.com/dp/{asin}"
+    webpage = requests.get(get_url(url), headers={'User-Agent': HEADER_, 'Accept-Language': 'en-US, en;q=0.5'})
+    soup = BeautifulSoup(webpage.content, "html.parser")
+
+    # Title
+    try:
+        title = soup.find("span", attrs={"id": 'productTitle'})
+        title = title.string.strip().replace(',', '')
+    except AttributeError:
+        title = "N/A"
+    product_dict["Title"] = title
+ 
+    # Price
+    try:
+        parent_price_span = soup.find(name="span", class_="apexPriceToPay")
+        price_span = parent_price_span.find(name="span", class_="a-offscreen")
+        price = float(price_span.getText().replace("$", ""))
+    except AttributeError:
+        price = "N/A"
+    product_dict["Price"] = price
+
+    # Rating
+    try:
+        rating = soup.find(name="span", attrs={"id": "acrPopover"})
+        if rating is None:
+            rating = "N/A"
+        else:
+            rating = rating.text
+    except AttributeError:
+        rating = "N/A"
+    product_dict["Rating"] = rating.strip("\n").strip()
+ 
+    # Features
+    try:
+        features = soup.find(name="div", attrs={"id": "feature-bullets"}).text
+    except AttributeError:
+        features = "N/A"
+    product_dict["BulletPoints"] = features
+    
+    # Description
+    try:
+        desc_body = soup.find(name="div", attrs={"id": "productDescription_feature_div"})
+        desc_div = desc_body.find(name="div", attrs={"id": "productDescription"})
+        desc_ps = desc_div.findAll(name="p")
+        desc = " ".join([p.text for p in desc_ps])
+        
+    except AttributeError:
+        desc = "N/A"
+    product_dict["Description"] = desc.strip()
+
+    # Main Image
+    try:
+        body = soup.find("body")
+        imgtag = soup.find("img", {"id":"landingImage"})
+        imageurl = dict(imgtag.attrs)["src"]
+    except AttributeError:
+        imageurl = ""
+    product_dict["MainImage"] = imageurl
+
+    # Options
+    options, options_to_image = {}, {}
+    try:
+        option_body = soup.find(name='div', attrs={"id": "softlinesTwister_feature_div"})
+        if option_body is None:
+            option_body = soup.find(name='div', attrs={"id": "twister_feature_div"})
+        option_blocks = option_body.findAll(name='ul')
+        for block in option_blocks:
+            name = json.loads(block["data-a-button-group"])["name"]
+            # Options
+            opt_list = []
+            for li in block.findAll("li"):
+                img = li.find(name="img")
+                if img is not None:
+                    opt = img["alt"].strip()
+                    opt_img = img["src"]
+                    if len(opt) > 0:
+                        options_to_image[opt] = opt_img
+                else:
+                    opt = li.text.strip()
+                if len(opt) > 0:
+                    opt_list.append(opt)
+            options[name.replace("_name", "").replace("twister_", "")] = opt_list
+    except AttributeError:
+        options = {}
+    product_dict["options"], product_dict["option_to_image"] = options, options_to_image
+    return product_dict
+
+# Get text observation from html
+def convert_html_to_text(html, simple=False, clicked_options=None, visited_asins=None):
+    def tag_visible(element):
+        ignore = {'style', 'script', 'head', 'title', 'meta', '[document]'}
+        return (
+            element.parent.name not in ignore and not isinstance(element, Comment)
+        )
+    html_obj = BeautifulSoup(html, 'html.parser')
+    texts = html_obj.findAll(text=True)
+    visible_texts = filter(tag_visible, texts)
+    if simple:
+        return ' [SEP] '.join(t.strip() for t in visible_texts if t != '\n')
+    else:
+        observation = ''
+        for t in visible_texts:
+            if t == '\n': continue
+            if t.parent.name == 'button':  # button
+                processed_t = f'[button] {t} [button]'
+            elif t.parent.name == 'label':  # options
+                if f'{t}' in clicked_options:
+                    processed_t = f'  [clicked button] {t} [clicked button]'
+                    observation = f'You have clicked {t}.\n' + observation
+                else:
+                    processed_t = f'  [button] {t} [button]'
+            elif t.parent.get('class') == ["product-link"]: # asins
+                if f'{t}' in visited_asins:
+                    processed_t = f'\n[clicked button] {t} [clicked button]'
+                else:
+                    processed_t = f'\n[button] {t} [button]'
+            else: # regular, unclickable text
+                processed_t =  str(t)
+            observation += processed_t + '\n'
+        return observation
+
+# Get action from dict
+def convert_dict_to_actions(page_type, products=None, asin=None, page_num=None, num_prods=None) -> dict:
+    info = {"valid": []}
+    if page_type == Page.RESULTS:
+        info["valid"] = ['click[back to search]']
+        if products is None or page_num is None or num_prods is None:
+            print(page_num)
+            print(num_prods)
+            print(products)
+            raise Exception('Provide `products`, `num_prods`, `page_num` to get `results` valid actions')
+        # Decide whether to add `next >` as clickable based on # of search results
+        if num_prods > 10:
+            info["valid"].append('click[next >]')
+        # Add `< prev` as clickable if not first page of search results
+        if page_num > 1:
+            info["valid"].append('click[< prev]')
+        for product in products:
+            info["valid"].append("click[item - " + product["Title"] + "]")
+    if page_type == Page.ITEM_PAGE:
+        if products is None or asin is None:
+            raise Exception('Provide `products` and `asin` to get `item_page` valid actions')
+        info["valid"] = ['click[back to search]', 'click[< prev]', 'click[description]',\
+            'click[features]', 'click[buy now]'] # To do: reviews
+        if "options" in products[asin]:
+            for key, values in products[asin]["options"].items():
+                for value in values:
+                    info["valid"].append("click[" + value + "]")
+    if page_type == Page.SUB_PAGE:
+        info["valid"] = ['click[back to search]', 'click[< prev]']
+    info['image_feat'] = torch.zeros(512)
+    return info

requirements.txt

@@ -1,2 +1,5 @@
+bs4
+flask
+requests
 torch
 transformers

templates/attributes_page.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css	">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
+    <link rel="icon" href="data:,">
+  </head>
+  <body>
+    <div class="container py-5">
+      <div class="row top-buffer">
+        <div class="col-sm-6">
+          <div id="instruction-text" class="text-center">
+            <h4>Instruction:<br>{{ instruction_text }}</h4>
+          </div>
+        </div>
+      </div>
+      <div class="row top-buffer">
+        <form method="post" action="{{url_for('index', session_id=session_id)}}">
+          <button type="submit" class="btn btn-success">Back to Search</button>
+        </form>
+      </div>
+      <div class="row top-buffer">
+        <form method="post" action="{{url_for('item_page', session_id=session_id, asin=asin, keywords=keywords, page=page, options=options)}}">
+          <button type="submit" class="btn btn-primary">&lt; Prev</button>
+        </form>
+      </div>
+      <div class="row top-buffer">
+        <div class="col-md-12">
+          <div class="row top-buffer">
+            <div class="col-sm-6" name="description">
+              <div class="card card-body">
+                <ul>
+                  {% for attribute in product_info.Attributes %}
+                  <li><p class="attribute"> {{attribute}}</p></li>
+                  {% endfor %}
+                </ul>
+              </div>
+            </div>
+            <div class="col-sm-6" name="description">
+              <div class="d-flex align-items-center justify-content-between mt-1">
+                <h5 class="font-weight-bold my-2 product-category">{{product_info.category}}</h5>
+              </div>
+              <div class="d-flex align-items-center justify-content-between mt-1">
+                <h5 class="font-weight-bold my-2 product-query">{{product_info.query}}</h5>
+              </div>
+              <div class="d-flex align-items-center justify-content-between mt-1">
+                <h5 class="font-weight-bold my-2 product-product_category">{{product_info.product_category}}</h5>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

templates/description_page.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css	">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
+    <link rel="icon" href="data:,">
+  </head>
+  <body>
+    <div class="container py-5">
+      <div class="row top-buffer">
+        <div class="col-sm-6">
+          <div id="instruction-text" class="text-center">
+            <h4>Instruction:<br>{{ instruction_text }}</h4>
+          </div>
+        </div>
+      </div>
+      <div class="row top-buffer">
+        <form method="post" action="{{url_for('index', session_id=session_id)}}">
+          <button type="submit" class="btn btn-success">Back to Search</button>
+        </form>
+      </div>
+      <div class="row top-buffer">
+        <form method="post" action="{{url_for('item_page', session_id=session_id, asin=asin, keywords=keywords, page=page, options=options)}}">
+          <button type="submit" class="btn btn-primary">&lt; Prev</button>
+        </form>
+      </div>
+      <div class="row top-buffer">
+        <div class="col-md-12">
+          <div class="row top-buffer">
+            <div class="col-sm-6" name="description">
+              <div class="card card-body">
+                <p class="product-info">{{product_info.Description}}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

templates/done_page.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <link rel="icon" href="data:,">
+  </head>
+  <body>
+    <!-- Code reference: https://bootsnipp.com/snippets/m13mN -->
+    <div class="container" style="margin-top: 8%;">
+      <div class="col-md-6 col-md-offset-3">     
+        <div class="row">
+          <div id="thankyou" class="text-center">
+            <h1>Thank you for shopping with us!</h1>
+          </div>
+          <div id="stats" class="text-center">
+            <h3 align="mturk_code">Your code: </h3>
+            <p><pre>{{ mturk_code }}</pre> (Paste it in your MTurk interface.)</p>
+            <div style="display:none">
+              <h2 align="left">Purchased</h2>
+              <hr class="solid">
+              <h4 id="asin">asin<pre>{{ asin }}</pre></p>
+              <h4 id="options">options<pre>{{ options | tojson }}</pre></h4>
+              <h4 id="purchased_attrs">attrs<pre>{{ purchased_attrs }}</pre></h4>
+              <h4 id="purchased-category">category<pre>{{ category }}</pre></h4>
+              <h4 id="purchased-query">query<pre>{{ query }}</pre></h4>
+              <h4 id="purchased-pc">product category<pre>{{ product_category }}</pre></h4>
+              <h2 align="left">Target</h2>
+              <hr class="solid">
+              <h4 id="goal-asin">asin<pre>{{ goal.asin }}</pre></p>
+              <h4 id="goal-options">options<pre>{{ goal.goal_options }}</pre></h4>
+              <h4 id="goal-attrs">attrs<pre>{{ goal.attributes }}</pre></h4>
+              <h4 id="goal-price">price upper<pre>{{ goal.price_upper }}</pre></h4>
+              <h4 id="goal-instruction-text">instuction text<pre>{{ goal.instruction_text }}</pre></h4>
+              <h4 id="goal-category">category<pre>{{ goal.category }}</pre></h4>
+              <h4 id="goal-pc">product category<pre>{{ goal.product_category }}</pre></h4>
+              <h4 id="goal-query">query<pre>{{ goal.query }}</pre></h4>
+              <h4>Goal <div id="goal"><pre>{{ goal | pprint }}</pre></div></h4>
+              <h2 align="left">Reward</h2>
+            </div>
+            <hr class="solid">
+      			<h3   id="reward">Your score (min 0.0, max 1.0)<pre>{{ reward }}</pre></h3>
+            <h4 hidden>Reward Details <div id="reward_info"><pre>{{ reward_info | pprint }}</pre></div></h4>
+          </div>
+        </div>            
+      </div>
+    </div>
+  </body>
+</html>

templates/features_page.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css	">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
+    <link rel="icon" href="data:,">
+  </head>
+  <body>
+    <div class="container py-5">
+      <div class="row top-buffer">
+        <div class="col-sm-6">
+          <div id="instruction-text" class="text-center">
+            <h4>Instruction:<br>{{ instruction_text }}</h4>
+          </div>
+        </div>
+      </div>
+      <div class="row top-buffer">
+        <form method="post" action="{{url_for('index', session_id=session_id)}}">
+          <button type="submit" class="btn btn-success">Back to Search</button>
+        </form>
+      </div>
+      <div class="row top-buffer">
+        <form method="post" action="{{url_for('item_page', session_id=session_id, asin=asin, keywords=keywords, page=page, options=options)}}">
+          <button type="submit" class="btn btn-primary">&lt; Prev</button>
+        </form>
+      </div>
+      <div class="row top-buffer">
+        <div class="col-md-12">
+          <div class="row top-buffer">
+            <div class="col-sm-6" name="bulletpoints">
+              <div class="card card-body">
+                <ul>
+                  {% for bulletpoint in product_info.BulletPoints %}
+                  <li><p class="product-info"> {{bulletpoint}}</p></li>
+                  {% endfor %}
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

templates/item_page.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css	">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
+    <link rel="icon" href="data:,">
+  </head>
+  <body>
+    <div class="container py-5">
+      <div class="row top-buffer">
+        <div class="col-sm-6">
+          <div id="instruction-text" class="text-center">
+            <h4>Instruction:<br>{{ instruction_text }}</h4>
+          </div>
+        </div>
+      </div>
+      <div class="row top-buffer">
+        <form method="post" action="{{url_for('index', session_id=session_id)}}">
+          <button type="submit" class="btn btn-success">Back to Search</button>
+        </form>
+      </div>
+      <div class="row top-buffer">
+        <form method="post" action="{{url_for('search_results', session_id=session_id, keywords=keywords, page=page)}}">
+          <button type="submit" class="btn btn-primary">&lt; Prev</button>
+        </form>
+      </div>
+      <div class="row top-buffer">
+        <div class="col-md-4 mb-4 mb-md-0">
+          <div class="row top-buffer">
+            <img id="product-image" src="{{product_info.MainImage}}" class="item-page-img">
+          </div>
+          {% for option_name, option_contents in product_info.options.items() %}
+            <div class="row top-buffer">
+              <h4>{{ option_name }}</h4>
+              <div class="radio-toolbar">
+                {% for option_content in option_contents %}
+                  {% set current_options = options.copy() %}
+                  {% set _ = current_options.update({option_name: option_content}) %}
+                  {% set url = url_for('item_page', session_id=session_id, asin=asin, keywords=keywords, page=page, options=current_options) %}
+                  <input type="radio" id="radio_{{ option_name }}{{ loop.index0 }}" name="{{ option_name }}" value="{{ option_content }}" onclick="window.location.href='{{ url }}';">
+                  <label for="radio_{{ option_name }}{{ loop.index0 }}">{{ option_content }}</label>
+                {% endfor %}
+              </div>
+            </div>
+          {% endfor %}
+        </div>
+        <div class="col-md-6">
+          <h2>{{product_info.Title}}</h2>
+          <h4>Price: {{product_info.Price}}</h4>
+          <h4>Rating: {{product_info.Rating}}</h4>
+          <div class="row top-buffer">
+            <div class="col-sm-3" name="description">
+              <form method="post" action="{{ url_for('item_sub_page', session_id=session_id, asin=asin, keywords=keywords, page=page, sub_page='Description', options=options) }}">
+                <button class="btn btn-primary" type="submit">Description</button>
+              </form>
+            </div>
+            <div class="col-sm-3" name="bulletpoints">
+              <form method="post" action="{{ url_for('item_sub_page', session_id=session_id, asin=asin, keywords=keywords, page=page, sub_page='Features', options=options) }}">
+                <button class="btn btn-primary" type="submit">Features</button>
+              </form>
+            </div>
+            <div class="col-sm-3" name="reviews">
+              <form method="post" action="{{ url_for('item_sub_page', session_id=session_id, asin=asin, keywords=keywords, page=page, sub_page='Reviews', options=options) }}">
+                <button class="btn btn-primary" type="submit">Reviews</button>
+              </form>
+            </div>
+<!--
+            <div class="col-sm-3" name="attributes">
+              <form method="post" action="{{ url_for('item_sub_page', session_id=session_id, asin=asin, keywords=keywords, page=page, sub_page='Attributes', options=options) }}">
+                <button class="btn btn-primary" type="submit">Attributes</button>
+              </form>
+            </div>
+-->
+          </div>
+        </div>
+        <div class="col-sm-2">
+          <div class="row top-buffer">
+            <form method="post" action="{{url_for('done', session_id=session_id, asin=asin, options=options )}}">
+              <button type="submit" class="btn btn-lg purchase">Buy Now</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+  <script>
+    $(document).ready(function() {
+      $('input:radio').each(function() {
+        //console.log($(this).val());
+        let options = JSON.parse(`{{ options | tojson }}`);
+        let optionValues = $.map(options, function(value, key) { return value });
+        //console.log(optionValues);
+        if (optionValues.includes($(this).val())) {
+          $(this).prop('checked', true);
+
+          let option_to_image = JSON.parse(`{{ product_info.option_to_image | tojson }}`);
+//          console.log($(this).val());
+//          console.log(options);
+//          console.log(option_to_image);
+          let image_url = option_to_image[$(this).val()];
+
+          console.log(image_url);
+          if (image_url) {
+            $("#product-image").attr("src", image_url);
+          }
+        }
+      });
+    });
+  </script>
+</html>

templates/results_page.html

@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css	">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
+    <link rel="icon" href="data:,">
+  </head>
+  <body>
+    <div class="container py-5">
+      <div class="row top-buffer">
+        <div class="col-sm-6">
+          <div id="instruction-text" class="text-center">
+            <h4>Instruction:<br>{{ instruction_text }}</h4>
+          </div>
+        </div>
+      </div>
+      <div class="row top-buffer">
+        <form method="post" action="{{ url_for('index', session_id=session_id) }}">
+          <button type="submit" class="btn btn-success">Back to Search</button>
+        </form>
+      </div>
+      <div class="row top-buffer">
+        <div class="col-sm-8">
+          <div class="display-4">
+            <h3>Page {{page}} (Total results: {{total}})</h3>
+          </div>
+          {% if page > 1 %}
+            <div class="col-sm-2">
+              <form method="post" action="{{url_for('search_results', session_id=session_id, keywords=keywords, page=page - 1)}}">
+                <button type="submit" class="btn btn-primary">&lt; Prev</button>
+              </form>
+            </div>
+            <div class="col-sm-2">
+              <form method="post" action="{{url_for('search_results', session_id=session_id, keywords=keywords, page=page + 1)}}">
+                <button type="submit" class="btn btn-primary">Next &gt;</button>
+              </form>
+            </div>
+          {% else %}
+            <div class="col-sm-2">
+            </div>
+            <div class="col-sm-2">
+              <form method="post" action="{{url_for('search_results', session_id=session_id, keywords=keywords, page=page + 1)}}">
+                <button type="submit" class="btn btn-primary">Next &gt;</button>
+              </form>
+            </div>
+          {% endif %}
+        </div>
+      </div>
+
+      <div class="row top-buffer">
+        {% for item in products %}
+        <div class="col-lg-12 mx-auto list-group-item">
+          <div class="col-lg-4">
+            <img src="{{item.MainImage}}" class="result-img">
+          </div>
+          <div class="col-lg-8">
+            <ul class="list-group shadow">
+                <div class="media align-items-lg-center flex-column flex-lg-row p-3">
+                  <div class="media-body order-2 order-lg-1 searched-product">
+                    {% set item_page_url = url_for('item_page', session_id=session_id, asin=item.asin, keywords=keywords, page=page, options=dict() ) %}
+                    <h4 class="mt-0 font-weight-bold mb-2 product-asin"><a class="product-link" href="{{ item_page_url }}">{{item.asin}}</a></h5>
+                    <h4 class="mt-0 font-weight-bold mb-2 product-title">{{item.Title}}</h5>
+                    <div class="d-flex align-items-center justify-content-between mt-1">
+                      <h5 class="font-weight-bold my-2 product-price">{{item.Price}}</h6>
+                    </div>
+<!--
+                    <div class="d-flex align-items-center justify-content-between mt-1">
+                      <h5 class="font-weight-bold my-2 product-category">{{item.category}}</h5>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mt-1">
+                      <h5 class="font-weight-bold my-2 product-query">{{item.query}}</h5>
+                    </div>
+                    <div class="d-flex align-items-center justify-content-between mt-1">
+                      <h5 class="font-weight-bold my-2 product-product_category">{{item.product_category}}</h5>
+                    </div>
+-->
+                  </div>
+                </div>
+            </ul>
+          </div>
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+  </body>
+</html>

templates/review_page.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css	">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
+    <link rel="icon" href="data:,">
+  </head>
+  <body>
+    <div class="container py-5">
+      <div class="row top-buffer">
+        <div class="col-sm-6">
+          <div id="instruction-text" class="text-center">
+            <h4>Instruction:<br>{{ instruction_text }}</h4>
+          </div>
+        </div>
+      </div>
+      <div class="row top-buffer">
+        <form method="post" action="{{url_for('index', session_id=session_id)}}">
+          <button type="submit" class="btn btn-success">Back to Search</button>
+        </form>
+      </div>
+      <div class="row top-buffer">
+        <form method="post" action="{{url_for('item_page', session_id=session_id, asin=asin, keywords=keywords, page=page, options=options)}}">
+          <button type="submit" class="btn btn-primary">&lt; Prev</button>
+        </form>
+      </div>
+      <div class="row top-buffer">
+        <div class="col-md-12">
+          <div class="row top-buffer">
+            <div class="col-sm-6" name="reviews">
+              <div class="card card-body">
+                {% for review in product_info.Reviews %}
+                  <div class="card">
+                    <div class="row text-left">
+                      <h4 class="blue-text mt-3">"{{review.title}}"</h4>
+                      <p class="text-left">
+                        <span>{{review.score}}</span>
+                        {% for i in range(review.score | int) %}
+                            <span class="fa fa-star star-active"></span>
+                        {% endfor %}
+                        {% for i in range(5 - review.score | int) %}
+                            <span class="fa fa-star star-inactive"></span>
+                        {% endfor %}
+                      </p>
+                      <p class="content">{{review.body}}</p>
+                    </div>
+                  </div>
+                {% endfor %}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

templates/search_page.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="{{url_for('static', filename='style.css')}}">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <link rel="icon" href="data:,">
+  </head>
+  <body>
+    <!-- Code reference: https://bootsnipp.com/snippets/m13mN -->
+    <div class="container" style="margin-top: 8%;">
+      <div class="col-md-6 col-md-offset-3">     
+        <div class="row">
+          <div id="logo" class="text-center">
+            <h2>Amazon Shopping Game</h2>
+          </div>
+          <div id="instruction-text" class="text-center">
+            <h4>Instruction: <br>{{ instruction_text }}</h4>
+          </div>
+          <form role="form" id="form-buscar" method="post" action="{{url_for('index', session_id=session_id)}}">
+            <div class="form-group">
+              <div class="input-group">
+                <input id="search_input" class="form-control" type="text" name="search_query" placeholder="Search..." required/>
+                <span class="input-group-btn">
+                  <button class="btn btn-success" type="submit"><i class="glyphicon glyphicon-search" aria-hidden="true"></i>Search</button>
+                </span>
+              </div>
+            </div>
+          </form>
+        </div>            
+      </div>
+    </div>
+  </body>
+</html>

webshop_lite.py

@@ -0,0 +1,102 @@
+import os
+
+from flask import render_template_string, Flask
+from predict_help import Page
+
+app=Flask(__name__)
+app.debug=True
+
+SESSION_ID = "ABC"
+TEMPLATE_DIR = "templates/"
+KEYWORDS = ["placeholder (not needed)"] # To Do: Does this matter?
+QUERY = ""
+product_map = {}
+
+def read_html_template(path):
+    with open(path) as f:
+        template = f.read()
+    return template
+
+@app.route('/', methods=['GET', 'POST'])
+def index(session_id, **kwargs):
+    print("Hello world")
+
+@app.route('/', methods=['GET', 'POST'])
+def search_results(data):
+    path = os.path.join(TEMPLATE_DIR, 'results_page.html')
+    html = render_template_string(
+        read_html_template(path=path),
+        session_id=SESSION_ID,
+        products=data,
+        keywords=KEYWORDS,
+        page=1,
+        total=len(data),
+        instruction_text=QUERY,
+    )
+    return html
+
+@app.route('/', methods=['GET', 'POST'])
+def item_page(session_id, asin, keywords, page, options):
+    path = os.path.join(TEMPLATE_DIR, 'item_page.html')
+    html = render_template_string(
+        read_html_template(path=path),
+        session_id=session_id,
+        product_info=product_map[asin],
+        keywords=keywords,
+        page=page,
+        asin=asin,
+        options=options,
+        instruction_text=QUERY
+    )
+    return html
+
+@app.route('/', methods=['GET', 'POST'])
+def item_sub_page(session_id, asin, keywords, page, sub_page, options):
+    path = os.path.join(TEMPLATE_DIR, sub_page.value.lower() + "_page.html")
+    html = render_template_string(
+        read_html_template(path),
+        session_id=session_id, 
+        product_info=product_map[asin],
+        keywords=keywords,
+        page=page,
+        asin=asin,
+        options=options,
+        instruction_text=QUERY
+    )
+    return html
+
+@app.route('/', methods=['GET', 'POST'])
+def done(asin, options, session_id, **kwargs):
+    path = os.path.join(TEMPLATE_DIR, 'done_page.html')
+    html = render_template_string(
+        read_html_template(path),
+        session_id=session_id,
+        reward=1,
+        asin=asin,
+        options=product_map[asin]["options"],
+        reward_info=kwargs.get('reward_info'),
+        goal_attrs=kwargs.get('goal_attrs'),
+        purchased_attrs=kwargs.get('purchased_attrs'),
+        goal=kwargs.get('goal'),
+        mturk_code=kwargs.get('mturk_code'),
+        query=kwargs.get('query'),
+        category=kwargs.get('category'),
+        product_category=kwargs.get('product_category'),
+    )
+    return html
+    
+# Project Dictionary Information onto Fake Amazon
+def dict_to_fake_html(data, page_type, asin=None, sub_page_type=None, options=None, prod_map={}, query=""):
+    global QUERY, product_map
+    QUERY = query
+    product_map = prod_map
+    with app.app_context(), app.test_request_context():
+        if page_type == Page.RESULTS:
+            return search_results(data)
+        if page_type == Page.ITEM_PAGE:
+            return item_page(SESSION_ID, asin, KEYWORDS, 1, options)
+        if page_type == Page.SUB_PAGE:
+            if sub_page_type is not None:
+                return item_sub_page(SESSION_ID, asin, KEYWORDS, 1, sub_page_type, options)
+            else:
+                raise Exception("Sub page of type", sub_page_type, "unrecognized")