separating instructsion into differen phases, with some style change

app.py

@@ -53,6 +53,7 @@ def get_similar_paper(
     )
     
     results = {
+        'name': name,
         'titles': titles,
         'abstracts': abstracts,
         'urls': paper_urls,
@@ -82,7 +83,7 @@ def get_similar_paper(
             sent_model, 
             abstract_text_input, 
             ab,
-            K=2 # top two sentences from the candidate #TODO make this adjustable by the user?
+            K=2 # top two sentences from the candidate 
         )
         
         # get scores for each word in the format for Gradio Interpretation component
@@ -121,28 +122,57 @@ def get_similar_paper(
     top_num_info_show = 2 # number of sentence pairs from each paper to show upfront
     summary_out = []
     for i in range(top_papers_show):
-        out_tmp = [
-            #gr.update(value=titles[i], visible=True), 
-            gr.update(value="""<a href="%s" target="_blank"><h4>%s</h4></a>"""%(paper_urls[i], titles[i]), visible=True),
-            #gr.update(value="#### [%s](%s)"%(titles[i], paper_urls[i]), visible=True), 
-            gr.update(value='#### Affinity: %0.3f'%doc_scores[i], visible=True) # document affinity
-        ]
+        if i == 0:
+            out_tmp = [
+                gr.update(value="""<a href="%s" target="_blank"><h4>%s</h4></a>"""%(paper_urls[i], titles[i]), visible=True),
+                gr.update(value="""#### Affinity Score: %0.3f 
+                          <div class="help-tip">
+                                <p>Measures how similar the paper's abstract is to the submission abstract.</p>
+                          </div>
+                          """%doc_scores[i],  
+                          visible=True) # document affinity
+            ]
+        else:
+            out_tmp = [
+                gr.update(value="""<a href="%s" target="_blank"><h4>%s</h4></a>"""%(paper_urls[i], titles[i]), visible=True),
+                gr.update(value='#### Affinity Score: %0.3f'%doc_scores[i], visible=True) # document affinity
+            ]
         tp = results[display_title[i]]['top_pairs']
         for j in range(top_num_info_show):
-            out_tmp += [
-                #gr.update(value='%0.3f'%tp[j]['score'], visible=True), # sentence relevance
-                gr.update(value='Sentence Relevance:\n%0.3f'%tp[j]['score'], visible=True), # sentence relevance
-                tp[j]['query']['original'],
-                tp[j]['query'],
-                tp[j]['candidate']['original'],
-                tp[j]['candidate']
-            ]
+            if i == 0 and j == 0:
+                out_tmp += [
+                    gr.update(value="""Sentence Relevance:\n%0.3f
+                            <div class="help-tip">
+                                <p>Measures how similar the sentence pairs are.</p>
+                            </div>"""%tp[j]['score'], visible=True), # sentence relevance
+                    tp[j]['query']['original'],
+                    tp[j]['query'],
+                    tp[j]['candidate']['original'],
+                    tp[j]['candidate']
+                ]
+            else:
+                out_tmp += [
+                    gr.update(value='Sentence Relevance:\n%0.3f'%tp[j]['score'], visible=True), # sentence relevance
+                    tp[j]['query']['original'],
+                    tp[j]['query'],
+                    tp[j]['candidate']['original'],
+                    tp[j]['candidate']
+                ]
         summary_out += out_tmp
-        
+
     # add updates to the show more button
     out = out + summary_out + [gr.update(visible=True)] # make show more button visible
     assert(len(out) == (top_num_info_show * 5 + 2) * top_papers_show + 3)
 
+    out += [gr.update(value="""
+                            <h3>Top three relevant papers by the reviewer <a href="%s" target="_blank">%s</a></h3>
+                            
+                            For each paper, two sentence pairs (one from the submission, one from the paper) with the highest relevance scores are shown.
+                            
+                            **<span style="color:black;background-color:#65B5E3;">Blue highlights</span>**: phrases that appear in both sentences.
+                            """%(author_id_input, results['name']),
+                            visible=True)] # result 1 description
+
     out += [gr.update(visible=True), gr.update(visible=True)] # demarcation line between results
 
     # progress status
@@ -153,9 +183,12 @@ def get_similar_paper(
     
     return tuple(out)
         
-def show_more():
+def show_more(info):
     # show the interactive part of the app
     return (
+        gr.update(value="""
+            ### Click on different papers by %s below (sorted by their affinity scores) to see other relevant parts!
+            """%info['name'], visible=True), # description
         gr.update(visible=True), # set of papers
         gr.update(visible=True), # submission sentences
         gr.update(visible=True), # title row
@@ -178,7 +211,6 @@ def change_output_highlight(selected_papers_radio, source_sent_choice, info={}):
         source_sents = info[selected_papers_radio]['source_sentences']
         highlights = info[selected_papers_radio]['highlight']
         for i, s in enumerate(source_sents):
-            #print('changing highlight')
             if source_sent_choice == s:
                 return highlights[str(i)]
     else:
@@ -192,8 +224,7 @@ def change_paper(selected_papers_radio, info={}):
         highlights = info[selected_papers_radio]['highlight']
         url = info[selected_papers_radio]['url']
         title_out = """<a href="%s" target="_blank"><h4>%s</h4></a>"""%(url, title)
-        # title_out = '#### [%s](%s)'%(title, url) # output in format of markdown
-        aff_score_out = '#### Affinity: %s'%aff_score
+        aff_score_out = '#### Affinity Score: %s'%aff_score
         return title_out, abstract, aff_score_out, highlights['0']
 
     else:
@@ -205,60 +236,33 @@ with gr.Blocks(css='style.css') as demo:
     # Text description about the app and disclaimer
     ### TEXT Description
     # TODO add instruction video link
-    # TODO shorten the instruction and make it clearer
     gr.Markdown(
         """
-# Paper Matching Helper
+# R2P2: Matching Reviewers to Papers in Peer Review
 
-This is a tool designed to help match an academic paper (submission) to a potential peer reviewer, by presenting information that may be relevant to the users.
-Below we describe how to use the tool. Also feel free to check out [this video]() for a quicker rundown. 
+#### Who is R2P2 for?
+It is for meta-reviewers, area chairs, program chairs, or anyone who oversees the submission-reviewer matching process in peer review for acadmeic conferences, journals, and grants. 
 
-##### Input
-- The tool requires two inputs: (1) an academic paper's abstract in a text format, (2) and a potential reviewer's [Semantic Scholar](https://www.semanticscholar.org/) profile link. Once you put in a valid profile link, the reviewer's name will be displayed. 
-- Once the name is confirmed, press the `What Makes This a Good Match?` button.
-- Based on the input information, the tool will first search for similar papers from the reviewer's previous publications using [Semantic Scholar API](https://www.semanticscholar.org/product/api). 
-##### Relevant Parts from Top Papers
-- You will be shown three most relevant papers from the reviewer with high **affinity scores** (ranging from 0 to 1) computed using text representations from a [language model](https://github.com/allenai/specter/tree/master/specter). 
-- For each of the paper, we present relevant pieces of information from the submission and the paper: two pairs of (sentence relevance score, sentence from the submission abstract, sentence from the paper abstract)
-- **<span style="color:black;background-color:#65B5E3;">Blue highlights</span>** inidicate phrases that appear in both sentences.
-##### More Relevant Parts
-- If the information above is not enough, click `See more relevant parts from other papers` button. 
-- You will see a list of top 10 similar papers with affinity scores.
-- You can select different papers from the list to see the title and the abstract in detail. 
-- Below the list of papers, we highlight relevant parts from the selected paper to different sentences of the submission abstract.
-- On the left, you will see individual sentences from the submission abstract to select from.
-- On the right, you will see the abstract of the selected paper, with **highlights** incidating relevant parts to the selected sentence.
-- **<span style="color:black;background-color:#DB7262;">Red highlights</span>**: sentences with high semantic similarity to the selected sentence. The darker the color, the higher the similarity.
-- **<span style="color:black;background-color:#65B5E3;">Blue highlights</span>**: phrases included in the selected sentence.
-- To see relevant parts in a different paper from the reviewer, click on another paper from the list.
--------
-        """
-    ) 
-    
-    # gr.HTML(
-    #     """
-
-    #     <div class="help-tip">
-    #         <p>This is the same tooltip, but with <b>HTML tags!</b> <a href="http://tutorialzine.com/">And a links!</a> You could do <i><strike>even more</strike></i>!</p>
-    #     </div>
+#### How does it help?
+A typical meta-reviewer workflow lacks supportive information on what makes the pre-selected candidate reviewers good fit for the submission. Only the **affinity scores** between the reviewer and the paper are provided, with no additional detail. 
 
-    #     <p>This time, the tooltip contains rich text. Try it!</p>
+R2P2 provide more information about each reviewer. It searches for the most relevant papers among the reviewer's previous publications and highlights relevant parts within them. 
 
-    #     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu diam consectetur, facilisis lorem in, condimentum est. Etiam at leo quis ligula ullamcorper varius. Vivamus sed risus vestibulum, faucibus nibh sed, eleifend enim. Nulla semper augue sit amet velit ultrices consectetur. Sed tincidunt consectetur fermentum.</p>
+Check out [this video]() for a quick demo of what R2P2 is, and how it can help!
 
-    #     """,
-    #     visible=True
-    # )
+-------
+        """
+    ) 
     
     ### INPUT
     with gr.Row() as input_row:
         with gr.Column():
-            abstract_text_input = gr.Textbox(label='Submission Abstract')
+            abstract_text_input = gr.Textbox(label='Submission Abstract', info='Paste in the abstract of the submission.')
         with gr.Column():
             with gr.Row():
-                author_id_input = gr.Textbox(label='Reviewer Link or ID (Semantic Scholar)')
+                author_id_input = gr.Textbox(label='Reviewer Profile Link (Semantic Scholar)', info="Paste in the reviewer's Semantic Scholar link")
             with gr.Row():
-                name = gr.Textbox(label='Confirm Reviewer Name', interactive=False)
+                name = gr.Textbox(label='Confirm Reviewer Name', info='This will be automatically updated based on the reviewer profile link above', interactive=False)
                 author_id_input.change(fn=update_name, inputs=author_id_input, outputs=name)
     with gr.Row():
         compute_btn = gr.Button('What Makes This a Good Match?') 
@@ -270,6 +274,8 @@ Below we describe how to use the tool. Also feel free to check out [this video](
     # Paper title, score, and top-ranking sentence pairs -- two sentence pairs per paper, three papers
     ## ONE BLOCK OF INFO FOR A SINGLE PAPER
     ## PAPER1 
+    with gr.Row():
+        result1_desc = gr.Markdown(value='', visible=False)
     # TODO hovering instructions
     with gr.Row():
         with gr.Column(scale=3):
@@ -305,7 +311,6 @@ Below we describe how to use the tool. Also feel free to check out [this video](
         with gr.Column(scale=3):
             paper_title2 = gr.Markdown(value='', visible=False)
         with gr.Column(scale=1):
-            #affinity2 = gr.Textbox(label='Affinity', interactive=False, value='', visible=False)
             affinity2 = gr.Markdown(value='', visible=False)
     with gr.Row() as rel2_1:
         with gr.Column(scale=1):
@@ -336,7 +341,6 @@ Below we describe how to use the tool. Also feel free to check out [this video](
         with gr.Column(scale=3):
             paper_title3 = gr.Markdown(value='', visible=False)
         with gr.Column(scale=1):
-            # affinity3 = gr.Textbox(label='Affinity', interactive=False, value='', visible=False)
             affinity3 = gr.Markdown(value='', visible=False)
     with gr.Row() as rel3_1:
         with gr.Column(scale=1):
@@ -359,9 +363,16 @@ Below we describe how to use the tool. Also feel free to check out [this video](
 
     ## Show more button
     with gr.Row():
-        see_more_rel_btn = gr.Button('See more relevant parts from other papers', visible=False)
+        see_more_rel_btn = gr.Button('Explore more in other papers', visible=False)
     
     ### PAPER INFORMATION
+    
+    # Description
+    with gr.Row():
+        result2_desc = gr.Markdown(
+            value=''
+            ,visible=False
+        )
 
     # show multiple papers in radio check box to select from
     with gr.Row():
@@ -376,7 +387,6 @@ Below we describe how to use the tool. Also feel free to check out [this video](
         with gr.Column(scale=3):
             paper_title = gr.Markdown(value='')
         with gr.Column(scale=1):
-            # affinity= gr.Textbox(label='Affinity', interactive=False, value='')
             affinity = gr.Markdown(value='')
     with gr.Row():
         paper_abstract = gr.Textbox(label='Abstract', interactive=False, visible=False)
@@ -449,6 +459,7 @@ Below we describe how to use the tool. Also feel free to check out [this video](
             sent_pair_candidate3_2,
             sent_pair_candidate3_2_hl,
             see_more_rel_btn,
+            result1_desc,
             demarc1,
             demarc2,
             search_status,
@@ -461,8 +472,9 @@ Below we describe how to use the tool. Also feel free to check out [this video](
     # Get more info (move to more interactive portion)
     see_more_rel_btn.click(
         fn=show_more,
-        inputs=None,
+        inputs=info,
         outputs=[
+            result2_desc,
             selected_papers_radio,
             source_sentences,
             title_row,

style.css

@@ -0,0 +1,87 @@
+/* adapted from https://tutorialzine.com/2014/07/css-inline-help-tips */
+
+/*-------------------------
+	Inline help tip
+--------------------------*/
+
+.help-tip{
+	position: absolute;
+	top: 18px;
+	right: 18px;
+	text-align: center;
+	background-color: #BCDBEA;
+	border-radius: 50%;
+	width: 24px;
+	height: 24px;
+	font-size: 14px;
+	line-height: 26px;
+	cursor: default;
+}
+
+.help-tip:before{
+	content:'?';
+	font-weight: bold;
+	color:#fff;
+}
+
+.help-tip:hover p{
+	display:block;
+	transform-origin: 100% 0%;
+
+	-webkit-animation: fadeIn 0.3s ease-in-out;
+	animation: fadeIn 0.3s ease-in-out;
+
+}
+
+.help-tip p{
+	display: none;
+	text-align: right;
+	background-color: #e0e7ea;
+	padding: 10px;
+	width: 500px;
+	position: absolute;
+	border-radius: 3px;
+	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
+	right: -4px;
+	color: #FFF;
+	font-size: 10px;
+	line-height: 1.4;
+}
+
+.help-tip p:before{
+	position: absolute;
+	content: '';
+	width:0;
+	height: 0;
+	border:6px solid transparent;
+	border-bottom-color:#1E2021;
+	right:10px;
+	top:-12px;
+}
+
+.help-tip p:after{
+	width:100%;
+	height:40px;
+	content:'';
+	position: absolute;
+	top:-40px;
+	left:0;
+}
+
+@-webkit-keyframes fadeIn {
+	0% { 
+		opacity:0; 
+		transform: scale(0.6);
+	}
+
+	100% {
+		opacity:100%;
+		transform: scale(1);
+	}
+}
+
+@keyframes fadeIn {
+	0% { opacity:0; }
+	100% { opacity:100%; }
+}
+