Update app.py

app.py

@@ -8,99 +8,6 @@ import time
 import gradio as gr
 import tweepy
 
-# The HTML body used for the WatchTower page
-html_body = '''
-<!-- Header -->
-<header class="w3-display-container w3-content w3-wide" style="max-width:1500px;" id="home">
-  <img class="w3-image" src="https://www.jamesstevenson.me/wp-content/uploads/2022/08/Copy-of-WatchTower-1.png" alt="Architecture" width="1500" height="800">
-  <div class="w3-display-middle w3-margin-top w3-center">
-    <h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-opacity-min"><b>WATCH</b></span> <span class="w3-hide-small w3-text-dark-grey">Tower</span></h1>
-  </div>
-</header>
-<!-- Container (About Section) -->
-<div class="w3-content w3-container w3-padding-64" id="about">
-  <p class="w3-center"><em>To get started using WatchTower go to the 'Getting Started' tab, authenticate with Twitter, customise your confidence tolerance (the lower the score the less confident WatchTower is that the users will be extremist), and run WatchTower.</p><br><br>
-  <h3 class="w3-center">Block Violent Content Before It Reaches Your Feed</h3>
-  <p class="w3-center"><em>WatchTower identifies, blocks, and filters out violent and radical content before it reaches your Twitter feed.
-</em></p>
-<br>
-  <p>WatchTower works to protect you from violent, misinformation, hate speech and other malicious communication by using a suite of machine learning models to identify user accounts that post content that commonly falls into these categories. WatchTower is broken down into two components, the first utilises the Twitter streaming API and applies a suite of machine learning models to identify users that commonly post malicious information, while the second element provides a web UI where users can authenticaate with Twitter and tailor the types and thresholds for the accounts they block.  </p>
-  <br>
-  <p> WatchTower was developed solely by James Stevenson and uses Pinpoint, a machine learning model also developed by James. The future roadmap sees WatchTower incorporate other models for identifying content such as misinformation and hate speech. More on Pinpoint and the model WatchTower uses to identify violent extremism can be seen below. To get started using WatchTower go to the 'Getting Started' tab, authenticate with Twitter, customise your confidence tolerance (the lower the score the less confident WatchTower is that the users will be extremist), and run WatchTower.</p>
-  <p class="w3-large w3-center w3-padding-16">Model Accuracy:</p>
-  <p class="w3-center"><em>Machine learning models can be validated based on several statistics. These statistics for Pinpoint the main ML model used by WatchTower can be seen below. </p>
-  <br>
-  <p class="w3-wide"><i class="fa fa-camera"></i>Accuracy</p>
-  <div class="w3-light-grey">
-    <div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:82%">82%</div>
-  </div>
-  <p class="w3-wide"><i class="fa fa-laptop"></i>Recall</p>
-  <div class="w3-light-grey">
-    <div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:67%">67%</div>
-  </div>
-  <p class="w3-wide"><i class="fa fa-photo"></i>Precision</p>
-  <div class="w3-light-grey">
-    <div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:73%">73%</div>
-  </div>
-  <p class="w3-wide"><i class="fa fa-photo"></i>F-Measure</p>
-  <div class="w3-light-grey">
-    <div class="w3-container w3-padding-small w3-dark-grey w3-center" style="width:70%">70%</div>
-  </div>
-</div>
-<div class="w3-row w3-center w3-dark-grey w3-padding-16">
-  <div class="w3-quarter w3-section">
-  </div>
-</div>
-<br>
-<!-- Container (Portfolio Section) -->
-<div class="w3-content w3-container w3-padding-64" id="portfolio">
-  <h3 class="w3-center">Chirp Development Challenge 2022</h3>
-  <p class="w3-center"><em>WatchTower was developed for the Chirp 2022 Twitter API Developer Challenge</em></p>
-</div><p> Watchtower was developed solely by James Stevenson for the  Chirp 2022 Twitter API Developer Challenge. More infomration of this can be found below.</p>
-<br>
-<img class="w3-image" src="https://cdn.cms-twdigitalassets.com/content/dam/developer-twitter/redesign-2021-images/blog2022/chirp/Dev-challenge.jpg.twimg.1920.jpg" alt="Architecture" width="1500" height="800">
-<br>
-<!-- Modal for full size images on click-->
-<div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'">
-  <span class="w3-button w3-large w3-black w3-display-topright" title="Close Modal Image"><i class="fa fa-remove"></i></span>
-  <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
-    <img id="img01" class="w3-image">
-    <p id="caption" class="w3-opacity w3-large"></p>
-  </div>
-</div>
-
-<script>
-// Modal Image Gallery
-function onClick(element) {
-  document.getElementById("img01").src = element.src;
-  document.getElementById("modal01").style.display = "block";
-  var captionText = document.getElementById("caption");
-  captionText.innerHTML = element.alt;
-}
-// Change style of navbar on scroll
-window.onscroll = function() {myFunction()};
-function myFunction() {
-    var navbar = document.getElementById("myNavbar");
-    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
-        navbar.className = "w3-bar" + " w3-card" + " w3-animate-top" + " w3-white";
-    } else {
-        navbar.className = navbar.className.replace(" w3-card w3-animate-top w3-white", "");
-    }
-}
-// Used to toggle the menu on small screens when clicking on the menu button
-function toggleFunction() {
-    var x = document.getElementById("navDemo");
-    if (x.className.indexOf("w3-show") == -1) {
-        x.className += " w3-show";
-    } else {
-        x.className = x.className.replace(" w3-show", "");
-    }
-}
-</script>
-</body>
-</html>
-'''
-
 # Twitter keys
 consumer_token = os.getenv('CONSUMER_TOKEN')
 consumer_secret = os.getenv('CONSUMER_SECRET')
@@ -108,12 +15,20 @@ my_access_token = os.getenv('ACCESS_TOKEN')
 my_access_secret = os.getenv('ACCESS_SECRET')
 bearer = os.getenv('BEARER')
 
+# Imports
+import json
+import os
+import time
+import gradio as gr
+import tweepy
+
 # Setup the gradio block and add some generic CSS
-block = gr.Blocks(css=".container { max-width: 800px; margin: auto; }", title="WatchTower")
+block = gr.Blocks(css="", title="WatchTower")
 
 # Chat history variable used for the chatbot prompt on the 'getting started' page.
 chat_history = []
 
+
 def get_client_from_tokens(oauth_verifier, oauth_token):
     '''
     This function is used for generating a Tweepy client object based on Oauth verifier and token paramiters
@@ -123,7 +38,7 @@ def get_client_from_tokens(oauth_verifier, oauth_token):
     '''
     new_oauth1_user_handler = tweepy.OAuth1UserHandler(
         consumer_token, consumer_secret,
-        callback="https://hf.space/embed/User1342/WatchTower/"
+        callback="http://127.0.0.1:7860/'#https://hf.space/embed/User1342/WatchTower/"
     )
     new_oauth1_user_handler.request_token = {
         "oauth_token": oauth_token,
@@ -174,7 +89,7 @@ def block_users(client, threshold, dataset):
 
                 finished = False
                 while not finished:
-                              
+
                     try:
                         print("preparing to block {}".format(user_id))
                         client.block(target_user_id=user_id)
@@ -183,7 +98,7 @@ def block_users(client, threshold, dataset):
                         print("time out error")
                         print(e)
                         finished = True
-                        #time.sleep(240)
+                        # time.sleep(240)
                         continue
                     except tweepy.errors.BadRequest as e:
                         print("bad request error")
@@ -192,7 +107,7 @@ def block_users(client, threshold, dataset):
                         continue
                     except:
                         time.sleep(240)
-                        continue              
+                        continue
                     time.sleep(1)
                     finished = True
                     me = client.get_me()
@@ -247,12 +162,14 @@ name = None
 
 
 def button_pressed(slider_value, url_params):
-    #print(url_params)
+    # print(url_params)
     return [None, chat(radio.value, slider_value, url_params)]
 
+
 # The website that the user will visit to authenticate WatchTower.
 target_website = None
 
+
 def update_target_website():
     '''
     Updates the URL used to authenticate WatchTower with Twitter.
@@ -264,7 +181,7 @@ def update_target_website():
     global chat_history
     global client
     global name
-    
+
     client = None
     name = "no username"
 
@@ -283,7 +200,8 @@ def update_target_website():
     return '<a href={}><img src="https://cdn.cms-twdigitalassets.com/content/dam/developer-twitter/auth-docs/sign-in-with-twitter-gray.png.twimg.1920.png" alt="Log In With Twitter"></a><br>'.format(
         get_target_website())
 
-# The below is a JS blob used to retrieve the URL params. 
+
+# The below is a JS blob used to retrieve the URL params.
 # Thanks to here: https://discuss.huggingface.co/t/hugging-face-and-gradio-url-paramiters/21110/2
 get_window_url_params = """
     function(text_input, url_params) {
@@ -294,35 +212,30 @@ get_window_url_params = """
         }
     """
 
+
 def get_target_website():
     '''
     A wrapper function used for retrieving the URL a user will use to authenticate WatchTower with Twitter.
-    :return: 
+    :return:
     '''
     oauth1_user_handler = tweepy.OAuth1UserHandler(
         consumer_token, consumer_secret,
-        callback="https://hf.space/embed/User1342/WatchTower/"
+        callback="http://127.0.0.1:7860/"#"https://hf.space/embed/User1342/WatchTower/"
     )
     target_website = oauth1_user_handler.get_authorization_url(signin_with_twitter=True)
 
     return target_website
 
+
 # The Gradio HTML component used for the 'sign in with Twitter' button
-twitter_auth_button = gr.HTML(
-    value='<a href={}><img src="https://cdn.cms-twdigitalassets.com/content/dam/developer-twitter/auth-docs/sign-in-with-twitter-gray.png.twimg.1920.png" alt="Log In With Twitter"></a><br>'.format(
-        get_target_website()))
 
 # The main chunk of code that uses Gradio blocks to create the UI
 with block:
+
+
     gr.HTML('''
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
-    <!-- Navbar (sit on top) -->
-<div class="w3-top">
-  <div class="w3-bar w3-white w3-wide w3-padding w3-card">
-    <p class="w3-bar-item w3-button"><b>WATCH</b> Tower</p>
-  </div>
-</div>
 ''')
     gr.HTML("<center><p><br></p></center>")
 
@@ -331,40 +244,42 @@ with block:
     user_message = "Log in via Twitter and configure your blocking options above."
 
     chat_history.append(["Welcome to Watchtower.", user_message])
-    tabs = gr.Tabs()
-    with tabs:
-        intro_tab = gr.TabItem("Introduction")
-        with intro_tab:
-            gr.HTML(html_body)
-
-        prediction_tab = gr.TabItem("Getting Started")
-        with prediction_tab:
-            html_button = gr.HTML('''
-            <header class="w3-display-container w3-content w3-wide" style="max-height:250px;" id="home">
-          <img class="w3-image" src="https://www.jamesstevenson.me/wp-content/uploads/2022/08/Copy-of-WatchTower-1.png" alt="Architecture" width="1500" height="800">
-          <div class="w3-display-middle w3-margin-top w3-center">
-            <h1 class="w3-xxlarge w3-text-white"><span class="w3-padding w3-black w3-opacity-min"><b>WATCH</b></span> <span class="w3-hide-small w3-text-dark-grey">Tower</span></h1>
-          </div>
-        </header>
-''')
-            with gr.Group():
-                with gr.Box():
-                    url_params = gr.JSON({}, visible=False, label="URL Params")
-                    text_input = gr.Text(label="Input", visible=False)
-                    text_output = gr.Text(label="Output", visible=False)
-                    with gr.Row().style(mobile_collapse=False, equal_height=True):
-                        twitter_auth_button
-                    with gr.Row().style(mobile_collapse=False, equal_height=True):
-                        radio = gr.CheckboxGroup(value="Violent", choices=["Violent", "Hate Speech", "Misinformation"],
-                                                 interactive=False, label="Behaviour To Block")
-
-                        slider = gr.Slider(value=10, interactive=True, label="Threshold Confidence Tolerance")
-
-                    chatbot = gr.Chatbot(value=chat_history, label="Watchtower Output").style()
-                    btn = gr.Button("Run WatchTower").style(full_width=True)
-        btn.click(fn=button_pressed, inputs=[slider, url_params],
-                  outputs=[text_output, chatbot], _js=get_window_url_params)
-        tabs.change(fn=update_target_website, inputs=None, outputs=None)
+
+    with gr.Group():
+        with gr.Row().style(mobile_collapse=False, equal_height=True):
+            gr.HTML(value=r'<img src="https://www.watchtower.cartographer.one/wp-content/uploads/2022/10/Blocking-Unfavorable-Content.png"  alt="Markdown Monster icon"  style="float: left; margin-right: 10px;" width="350"/>').style(
+                )
+            with gr.Box():
+                #gr.Label(value="WatchTower", visible=True, interactive=False)
+                url_params = gr.JSON({}, visible=False, label="URL Params").style(
+                )
+                text_input = gr.Text(label="Input", visible=False).style(
+                    rounded=(False, True, True, False),
+                )
+                text_output = gr.Text(label="Output", visible=False).style(
+                    rounded=(False, True, True, False),
+                )
+                twitter_auth_button = gr.HTML(
+                    value='<a href={}><img src="https://cdn.cms-twdigitalassets.com/content/dam/developer-twitter/auth-docs/sign-in-with-twitter-gray.png.twimg.1920.png" alt="Log In With Twitter"></a><br>'.format(
+                        get_target_website())).style(
+                )
+                with gr.Row().style(mobile_collapse=True, equal_height=True):
+                    radio = gr.CheckboxGroup(value="Violent", choices=["Violent", "Hate Speech", "Misinformation"],
+                                                 interactive=False, label="Behaviour To Block").style(
+                    rounded=(False, True, True, False),
+                )
+
+                    slider = gr.Slider(value=10, interactive=True, label="Threshold Confidence Tolerance")
+
+                chatbot = gr.Chatbot(value=chat_history, label="Watchtower Output").style(
+                    rounded=(False, True, True, False),
+                )
+        btn = gr.Button("Run WatchTower").style(
+                    margin=False,
+                    rounded=(False, True, True, False), full_width=True
+                )
+    btn.click(fn=button_pressed, inputs=[slider, url_params],
+              outputs=[text_output, chatbot], _js=get_window_url_params)
     gr.Markdown(
         """___
    <p style='text-align: center'>
@@ -377,8 +292,9 @@ with block:
 # Setup callback for when page loads (used to set a new Twitter auth target webspage)
 block.__enter__()
 block.set_event_trigger(
-    event_name="load", fn=update_target_website, inputs=None, outputs=[html_button], no_target=True
+    event_name="load", fn=update_target_website, inputs=None, outputs=[], no_target=True
 )
 
 # Launcg the page
-block.launch(enable_queue=False, favicon_path="https://www.jamesstevenson.me/wp-content/uploads/2022/08/Untitled-design-32.png")
+block.launch(enable_queue=False,
+             favicon_path="https://www.jamesstevenson.me/wp-content/uploads/2022/08/Untitled-design-32.png")