html component

app.py

@@ -75,6 +75,7 @@ def add_bg_from_url():
 
 # add_bg_from_url() 
 
+
 #add whitespace to fix scroll
 def WHITE_SPACE(lines):
     for x in range(lines):
@@ -212,8 +213,68 @@ with st.expander('Adjust your tone intensities for your preference: '):
 
 Loxz_recom_box = st.checkbox('Select Loxz Recommended Tones for Optimal Output')
 
-if st.button('Generate Predictions'):
+def create_charts():
+    # Starting predictions
+    bucket='emailcampaignmodeldata'
+    # file_key = 'fullEmailBody/fullemailtextbody_labeled_3rates_8tones_20220524.csv'
 
+    # email_data = utils.get_files_from_aws(bucket,file_key)
+    tone_key = 'ModelSADataSets/Tone_and_target.csv'
+    tone_data = FunctionsModelSA_V1.load_data()
+    
+    test_predictions,tones = FunctionsModelSA_V1.convert_text_to_tone(input_text)
+
+    # st.dataframe(test_predictions)
+    # st.dataframe(tones)
+    campaign_val='campaign_type_'+ campaign
+    industry_val='industry_'+ industry
+    pred,lower,upper,model = FunctionsModelSA_V1.prediction(tones,campaign_val,industry_val,target)
+    worst_target,best_target,best_target_tones = FunctionsModelSA_V1.find_max_cat(tone_data,target,industry_val,campaign_val)
+    #best_target, best_target_tones
+    #FunctionsModelSA_V1.plot_CI(pred,lower,upper)
+    st.write('The Predicted Value is ' + str(pred))
+    fig1 = go.Figure(go.Bar(
+        name = 'Tone Levels',
+        x=[joyful_tone_value, confident_tone_value, urgent_tone_value, friendly_tone_value, optimistic_tone_value, analytical_tone_value, casual_tone_value],
+        y=['Joyful', 'Confident', 'Urgent', 'Friendly', 'Optimistic', 'Analytical', 'Casual'],
+        orientation='h')
+    )
+    
+    st.plotly_chart(fig1, use_container_width=True)
+
+    #if((best_target!=0) and (pred<best_target)):
+    if Loxz_recom_box == True:
+        recommended_changes=(best_target_tones)   
+        change=best_target-pred
+        #recommend(tones,recommended_changes,change,target)
+        fig2 = go.Figure()
+        fig2.add_trace(go.Bar(
+            y=tone_labels,
+            x=recommended_changes,
+            name='Recommend changes',
+            orientation='h',
+            text=np.round(recommended_changes,3),
+            width=.5,
+            marker=dict(
+            color='#e60f00',
+            line=dict(color='rgba(58, 71, 80, 1.0)', width=1)))
+        )
+        fig2.update_traces(textfont_size=18, textposition="outside", cliponaxis=False)
+        if target == 'Revenue_Per_Email':
+            out = f"${round(change,2)}"
+            st.write("The output will be between the range " + str(round(lower,2)) + ' and ' + str(round(upper,2)))
+            st.write("The Predicted "+str(target) +" is "+ str(round(pred,2)))
+        else:
+            out = f"{round(change,2)*100}%"
+            st.write("The output will be between the range " + str(round(lower,2) * 100) + ' and ' + str(round(upper,2) *100))
+            st.write("The Predicted "+str(target) +" is "+ str(round(pred,2)*100))
+        fig2.update_layout(title_text=f'The following Changes will yield a {out} increase in {target}')
+        
+        st.plotly_chart(fig2, use_container_width=True)
+        #FunctionsModelSA_V1.corrections(best_target_tones,test_predictions))
+
+
+if st.button('Generate Predictions'):
     start_time = time.time() 
     if input_text == "":
         st.error('Please enter a sentence!')
@@ -221,67 +282,49 @@ if st.button('Generate Predictions'):
         placeholder = st.empty()
         placeholder.text('Loading Data...')
         
-        # Starting predictions
-        bucket='emailcampaignmodeldata'
-        # file_key = 'fullEmailBody/fullemailtextbody_labeled_3rates_8tones_20220524.csv'
-
-        # email_data = utils.get_files_from_aws(bucket,file_key)
-        tone_key = 'ModelSADataSets/Tone_and_target.csv'
-        tone_data = FunctionsModelSA_V1.load_data()
-        
-        test_predictions,tones = FunctionsModelSA_V1.convert_text_to_tone(input_text)
-
-        # st.dataframe(test_predictions)
-        # st.dataframe(tones)
-        campaign_val='campaign_type_'+ campaign
-        industry_val='industry_'+ industry
-        pred,lower,upper,model = FunctionsModelSA_V1.prediction(tones,campaign_val,industry_val,target)
-        worst_target,best_target,best_target_tones = FunctionsModelSA_V1.find_max_cat(tone_data,target,industry_val,campaign_val)
-        #best_target, best_target_tones
-        #FunctionsModelSA_V1.plot_CI(pred,lower,upper)
-        st.write('The Predicted Value is ' + str(pred))
-        fig1 = go.Figure(go.Bar(
-            name = 'Tone Levels',
-            x=[joyful_tone_value, confident_tone_value, urgent_tone_value, friendly_tone_value, optimistic_tone_value, analytical_tone_value, casual_tone_value],
-            y=['Joyful', 'Confident', 'Urgent', 'Friendly', 'Optimistic', 'Analytical', 'Casual'],
-            orientation='h')
-        )
-       
-        st.plotly_chart(fig1, use_container_width=True)
-
-        #if((best_target!=0) and (pred<best_target)):
-        if Loxz_recom_box == True:
-            recommended_changes=(best_target_tones)   
-            change=best_target-pred
-            #recommend(tones,recommended_changes,change,target)
-            fig2 = go.Figure()
-            fig2.add_trace(go.Bar(
-                y=tone_labels,
-                x=recommended_changes,
-                name='Recommend changes',
-                orientation='h',
-                text=np.round(recommended_changes,3),
-                width=.5,
-                marker=dict(
-                color='#e60f00',
-                line=dict(color='rgba(58, 71, 80, 1.0)', width=1)))
-            )
-            fig2.update_traces(textfont_size=18, textposition="outside", cliponaxis=False)
-            if target == 'Revenue_Per_Email':
-                out = f"${round(change,2)}"
-                st.write("The output will be between the range " + str(round(lower,2)) + ' and ' + str(round(upper,2)))
-                st.write("The Predicted "+str(target) +" is "+ str(round(pred,2)))
-            else:
-                out = f"{round(change,2)*100}%"
-                st.write("The output will be between the range " + str(round(lower,2) * 100) + ' and ' + str(round(upper,2) *100))
-                st.write("The Predicted "+str(target) +" is "+ str(round(pred,2)*100))
-            fig2.update_layout(title_text=f'The following Changes will yield a {out} increase in {target}')
-            
-            st.plotly_chart(fig2, use_container_width=True)
-            #FunctionsModelSA_V1.corrections(best_target_tones,test_predictions))
+        create_charts()
         
-    placeholder.empty()
+        placeholder.empty()
+
+st.components.v1.html(
+    """
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <div id="accordion">
+      <div class="card">
+        <div class="card-header" id="headingOne">
+          <h5 class="mb-0">
+            <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+            Collapsible Group Item #1
+            </button>
+          </h5>
+        </div>
+        <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
+          <div class="card-body">
+            Collapsible Group Item #1 content
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-header" id="headingTwo">
+          <h5 class="mb-0">
+            <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+            Collapsible Group Item #2
+            </button>
+          </h5>
+        </div>
+        <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
+          <div class="card-body">
+            Collapsible Group Item #2 content
+          </div>
+        </div>
+      </div>
+    </div>
+    """,
+    height=600,
+)
 
 WHITE_SPACE(10)
-st.write('hi')
+st.write('All rights reserved by Loxz Digital')