PageRenderTime 91ms CodeModel.GetById 24ms RepoModel.GetById 0ms app.codeStats 0ms

/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. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet" type="text/css">
  6. <title>Koanbot</title>
  7. <header id="title" align="center">Koanbot</header>
  8. <main id="main">
  9. <body>
  10. <aside id="about">
  11. <h3>About Koanbot:</h3>
  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. with texts written by <a href="http://en.wikipedia.org/wiki/Cory_Doctorow">Cory Doctorow</a>. To approximate
  14. the back-and-forth of a natural conversation, the bot uses
  15. the words in each input sentence as its base for the following response.
  16. If any input filters are selected, the 'seed' words are
  17. filtered, then passed along to the 'brain'. The brain generates a set
  18. of possible response sentences, using <a href="http://en.wikipedia.org/wiki/N-gram">n-gram</a> probability to build
  19. the sentence word-by-word. Once a set of candidate sentences have
  20. been generated, the candidate sentences are passed through any
  21. output filters that have been selected. If more than one candidate
  22. sentence remains after the filtering, one is chosen at random.<br><br>Thanks for chatting!
  23. </p>
  24. {% if reply %}
  25. <a href="https://twitter.com/share" class="twitter-share-button"
  26. data-text = "Koanbot says: {{reply}}"
  27. data-lang="en">Tweet'dat Shit</a>
  28. {% endif %}
  29. </aside>
  30. <aside id="filters">
  31. <h5> Brain N-gram Type:</h5>
  32. <select class="filters" form="input_form" name="brain_types" id="brain_types">
  33. {% for key in brain_types.keys() %}
  34. <option value = "{{key}}">{{key}}</option>
  35. {% endfor %}
  36. </select>
  37. <h5> Input filters:</h5>
  38. <select class="filters" form="input_form" name="input_filter" id="input_filter">
  39. {% for key, val in input_filters.items() %}
  40. <option value="{{key}}" data-description="{{val[1]}}">{{key}}</option>
  41. {% endfor %}
  42. </select>
  43. <h5> Output filters:</h5>
  44. <select class="filters" form="input_form" name="output_filter" id="output_filter">
  45. {% for key, val in output_filters.items() %}
  46. <option value="{{key}}" data-description="{{val[1]}}">{{key}}</option>
  47. {% endfor %}
  48. </select>
  49. <select class="filters hidden" form="input_form" name="output_filter2" id="output_filter2">
  50. {% for key, val in output_filters.items() %}
  51. <option value="{{key}}" data-description="{{val[1]}}">{{key}}</option>
  52. {% endfor %}
  53. </select>
  54. <select class="filters hidden" form="input_form" name="output_filter3" id="output_filter3">
  55. {% for key, val in output_filters.items() %}
  56. <option value="{{key}}" data-description="{{val[1]}}">{{key}}</option>
  57. {% endfor %}
  58. </select>
  59. <h5 class="desc"> Input Filter Description: </h5>
  60. <p class="desc hidden" id="in_descrip"> Input filter description </p>
  61. <h5 class="desc"> Output Filter Description: </h5>
  62. <p class="desc hidden" id="out_descrip_1"> Out 1 description </p>
  63. <p class="desc hidden" id="out_descrip_2"> Out 2 description </p>
  64. <p class="desc hidden" id="out_descrip_3"> Out 3 description </p>
  65. </aside>
  66. <article>
  67. <div id="output_box">
  68. {% if reply %}
  69. Koanbot says: {{reply}}
  70. {% endif %}
  71. </div>
  72. <form id="input_form" action="{{ url_for('submit') }}" method="POST" class="submit">
  73. <div class="field">
  74. <input type="text" size="auto" name="submission" id="submission" placeholder=" Type here to chat with Koanbot"/>
  75. </div>
  76. </form>
  77. <p></p>
  78. <a href="#" class="show_hide">Click here to see how this sentence was generated</a>
  79. <div class="slidingDiv sausage">
  80. {% if sausage %}
  81. {% for key, value in sausage.items() %}
  82. {{value|safe}}
  83. {% endfor %}
  84. {% endif %}
  85. </div>
  86. </article>
  87. </main>
  88. <footer>
  89. <p>Created by Corinne Hutchinson, Nathan Hubbell, and Joshua Frailey<br>
  90. View the python source code on <a href="https://github.com/corinnelhh/chatbot">github</a>.<br>
  91. <a href="mailto:koanbot@gmail.com"> Email us.</a></p>
  92. </footer>
  93. <script type="text/javascript" src="{{ url_for('static', filename='jquery.js') }}"></script>
  94. <script type="text/javascript" src="{{ url_for('static', filename='application.js') }}"></script>
  95. <script type="text/javascript" src="{{ url_for('static', filename='twitter.js') }}"> </script>
  96. </body>
  97. </html>