/templates/base.html

https://gitlab.com/foresterh/chatbot · HTML · 98 lines · 97 code · 1 blank · 0 comment · 0 complexity · fcc09de8984e1d96d915ea9698a3e721 MD5 · raw file 

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.     <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5.     <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet" type="text/css">
    6. 

  6.     <title>Koanbot</title>
    7. 

  7.     <header id="title" align="center">Koanbot</header>
    8. 

  8.     <main id="main">
    9. 

  9.     <body>
    10. 

  10.     <aside id="about">
    11. 

  11.         <h3>About Koanbot:</h3>
    12. 

  12.         <p> Our <a href="http://en.wikipedia.org/wiki/Chatterbot">chatbot</a> is built with a <a href="http://en.wikipedia.org/wiki/Markov_chain">Markov Chain</a> 'brain', and was trained
    13. 

  13.         with texts written by <a href="http://en.wikipedia.org/wiki/Cory_Doctorow">Cory Doctorow</a>. To approximate
    14. 

  14.         the back-and-forth of a natural conversation, the bot uses
    15. 

  15.         the words in each input sentence as its base for the following response.
    16. 

  16.         If any input filters are selected, the 'seed' words are
    17. 

  17.         filtered, then passed along to the 'brain'. The brain generates a set
    18. 

  18.         of possible response sentences, using <a href="http://en.wikipedia.org/wiki/N-gram">n-gram</a> probability to build
    19. 

  19.         the sentence word-by-word. Once a set of candidate sentences have
    20. 

  20.         been generated, the candidate sentences are passed through any
    21. 

  21.         output filters that have been selected. If more than one candidate
    22. 

  22.         sentence remains after the filtering, one is chosen at random.<br><br>Thanks for chatting!
    23. 

  23.         </p>
    24. 

  24.         {% if reply %}
    25. 

  25. 

  26.         <a href="https://twitter.com/share" class="twitter-share-button"
    27. 

  27.        data-text = "Koanbot says: {{reply}}"
    28. 

  28.        data-lang="en">Tweet'dat Shit</a>
    29. 

  29.         {% endif %}
    30. 

  30.     </aside>
    31. 

  31.     <aside id="filters">
    32. 

  32.         <h5> Brain N-gram Type:</h5>
    33. 

  33.             <select class="filters" form="input_form" name="brain_types" id="brain_types">
    34. 

  34.                 {% for key in brain_types.keys() %}
    35. 

  35.                 <option value = "{{key}}">{{key}}</option>
    36. 

  36.                 {% endfor %}
    37. 

  37.             </select>
    38. 

  38.         <h5> Input filters:</h5>
    39. 

  39.             <select class="filters" form="input_form" name="input_filter" id="input_filter">
    40. 

  40.                 {% for key, val in input_filters.items() %}
    41. 

  41.                 <option value="{{key}}" data-description="{{val[1]}}">{{key}}</option>
    42. 

  42.                 {% endfor %}
    43. 

  43.             </select>
    44. 

  44.         <h5> Output filters:</h5>
    45. 

  45.             <select class="filters" form="input_form" name="output_filter" id="output_filter">
    46. 

  46.                 {% for key, val in output_filters.items() %}
    47. 

  47.                 <option value="{{key}}" data-description="{{val[1]}}">{{key}}</option>
    48. 

  48.                 {% endfor %}
    49. 

  49.             </select>
    50. 

  50.             <select class="filters hidden" form="input_form" name="output_filter2" id="output_filter2">
    51. 

  51.                 {% for key, val in output_filters.items() %}
    52. 

  52.                 <option value="{{key}}" data-description="{{val[1]}}">{{key}}</option>
    53. 

  53.                 {% endfor %}
    54. 

  54.             </select>
    55. 

  55.             <select class="filters hidden" form="input_form" name="output_filter3" id="output_filter3">
    56. 

  56.                 {% for key, val in output_filters.items() %}
    57. 

  57.                 <option value="{{key}}" data-description="{{val[1]}}">{{key}}</option>
    58. 

  58.                 {% endfor %}
    59. 

  59.             </select>
    60. 

  60.         <h5 class="desc"> Input Filter Description: </h5>
    61. 

  61.             <p class="desc hidden" id="in_descrip"> Input filter description </p>
    62. 

  62.         <h5 class="desc"> Output Filter Description: </h5>
    63. 

  63.             <p class="desc hidden" id="out_descrip_1"> Out 1 description </p>
    64. 

  64.             <p class="desc hidden" id="out_descrip_2"> Out 2 description </p>
    65. 

  65.             <p class="desc hidden" id="out_descrip_3"> Out 3 description </p>
    66. 

  66.     </aside>
    67. 

  67.         <article>
    68. 

  68.         <div id="output_box">
    69. 

  69.         {% if reply %}
    70. 

  70.         Koanbot says: {{reply}}
    71. 

  71.         {% endif %}
    72. 

  72.         </div>
    73. 

  73.             <form id="input_form" action="{{ url_for('submit') }}" method="POST" class="submit">
    74. 

  74.                 <div class="field">
    75. 

  75.                 <input type="text" size="auto" name="submission" id="submission" placeholder="   Type here to chat with Koanbot"/>
    76. 

  76.                 </div>
    77. 

  77.             </form>
    78. 

  78.             <p></p>
    79. 

  79.             <a href="#" class="show_hide">Click here to see how this sentence was generated</a>
    80. 

  80.             <div class="slidingDiv sausage">
    81. 

  81.                 {% if sausage %}
    82. 

  82.                     {% for key, value in sausage.items() %}
    83. 

  83.                         {{value|safe}}
    84. 

  84.                     {% endfor %}
    85. 

  85.                 {% endif %}
    86. 

  86.             </div>
    87. 

  87.         </article>
    88. 

  88.     </main>
    89. 

  89.         <footer>
    90. 

  90.             <p>Created by Corinne Hutchinson, Nathan Hubbell, and Joshua Frailey<br>
    91. 

  91.             View the python source code on <a href="https://github.com/corinnelhh/chatbot">github</a>.<br>
    92. 

  92.             <a href="mailto:koanbot@gmail.com"> Email us.</a></p>
    93. 

  93.         </footer>
    94. 

  94.     <script type="text/javascript" src="{{ url_for('static', filename='jquery.js') }}"></script>
    95. 

  95.     <script type="text/javascript" src="{{ url_for('static', filename='application.js') }}"></script>
    96. 

  96.     <script type="text/javascript" src="{{ url_for('static', filename='twitter.js') }}"> </script>
    97. 

  97.     </body>
    98. 

  98. </html>
    99.