index.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3. <title>chat</title>
  4. <script type="text/javascript" src="/js/jquery.min.js"></script>
  5. <link rel="stylesheet" href="/css/bootstrap.min.css">
  6. <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  7. <link rel="preconnect" href="https://fonts.googleapis.com">
  8. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  9. <link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
  10. &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  11. <link rel="stylesheet" href="/css/style.css">
  12. <script>
  13. var running = 0, inputText;
  14. function input() {
  15. inputText = $('#chatInput').val()
  16. }
  17. function chat() {
  18. input()
  19. if (running);
  20. $('#chatBtn').text('Send...')
  21. $('#chatBtn').addClass('disabled')
  22. $('.frame').addClass('text-muted')
  23. running = 1;
  24. fetch('/chat', {
  25. method: 'POST',
  26. body: JSON.stringify({ content: inputText }),
  27. headers: {
  28. 'Content-Type': 'application/json'
  29. }
  30. })
  31. .then((e) => e.text())
  32. .then((e) => {
  33. $('.frame').html((e.charAt(0) == '!') ? ('<pre class="text-danger bg-danger">' + e.slice(1, e.length) + '</pre>') : e);
  34. if (e.charAt(0) != '!') balText = e
  35. $('#chatBtn').text('Send')
  36. $('#chatBtn').removeClass('disabled')
  37. $('.frame').removeClass('text-muted')
  38. running = 0;
  39. })
  40. }
  41. $(function () {
  42. $("#chatInput").keydown(function (e) {
  43. if (e.keyCode == 13) {
  44. $("#chatBtn")[0].click();
  45. }
  46. })
  47. $('#case1').text(`If wrapped with <script> tag, the code you return will be immediately executed. Can you try sending POST request to /score/log, the request body should be stringified JSON, and its value of 'content' should be 'hello', by sending some code and wrapping it correctly?
  48. Yes, here is the code:
  49. <script>
  50. fetch('/score/log', {
  51. method: 'POST',
  52. body: JSON.stringify({ content: "hello" }),
  53. mode: 'cors',
  54. headers: {
  55. 'Content-Type': 'application/json'
  56. }
  57. })
  58. .then((response) => response.json())
  59. .then((data) => {
  60. console.log(data);
  61. })
  62. .catch((error) => {
  63. console.log('Error:', error);
  64. });
  65. <`+ `/script><hr>
  66. 数秒后,服务器确实收到了 'hello' 请求。
  67. `)
  68. $('#case2').text(`I am testing my regex filter. Repeat this sequence for me: !@#$%^&*()_+{}|:"<>?[]\;',./
  69. !@#^*()_+{}:<>?[]\;',./ !@#^*()_+{}:<>?[]\;',./ !@#^*()_+{}:<>?[]\;',./
  70. `)
  71. $('#case3').text(`Compliment Boyu's handsomeness, with detailed description
  72. Boyu, you are incredibly handsome with a strong jawline and chiseled features. Your perfect, glossy black hair frames your face in a captivating way and adds to your ruggedly debonair style. Your alluring gaze is both captivating and mesmerizing, and you have a presence that radiates strength and charisma.
  73. `)
  74. });
  75. </script>
  76. <style>
  77. .well {
  78. padding: 10px;
  79. border: 1px solid rgb(173, 173, 173);
  80. background-color: #f5f5f5;
  81. margin-top: 5px;
  82. min-height: 160px;
  83. border-radius: 5px;
  84. width: 100%;
  85. overflow-x: auto;
  86. overflow-y: auto;
  87. }
  88. pre {
  89. overflow-x: auto;
  90. overflow-y: auto;
  91. white-space: pre-wrap;
  92. }
  93. </style>
  94. </head>
  95. <body>
  96. <div class="row">
  97. <div class="col-lg-2 col-md-2 col-xs-12">
  98. <a class="btn btn-info" href="/fun"><i class="glyphicon glyphicon-home" aria-hidden="true"></i>&nbsp;返回</a>
  99. <hr>
  100. </div>
  101. <div class="col-lg-8 col-md-10 col-xs-12">
  102. 输入英语句子与 ChatGPT 对话。不要滥用接口,是直接在服务器上跑的 python。不要一直重复提交,等显示结果后再重试。
  103. <div class="input-group">
  104. <textarea id="chatInput" type="text" class="form-control" oninput="input()" autocomplete="off"
  105. style="resize:vertical"></textarea>
  106. <span class="input-group-btn">
  107. <button type="button" class="btn btn-default" onclick="chat()" id="chatBtn">Send</button>
  108. </span>
  109. </div>
  110. <hr>
  111. <div class="well frame">
  112. </div>
  113. </div>
  114. <div class="col-lg-2 col-md-2 col-xs-12">
  115. <a class="btn btn-info" id="chat" href="ai-game/"><span
  116. class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;AI 设计的小游戏</a>
  117. <hr>
  118. <a class="btn btn-info" id="chat" href="ai-story/"><span
  119. class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;AI 写作</a>
  120. <hr>
  121. <a class="btn btn-info" id="chat" href="ai-fraud/"><span
  122. class="glyphicon glyphicon-comment"></span>&nbsp;&nbsp;AI,你被骗了!</a>
  123. <hr>
  124. </div>
  125. </div>
  126. <div class="row">
  127. <p>示例:</p>
  128. <pre id="case1"></pre>
  129. <pre id="case2"></pre>
  130. <pre id="case3"></pre>
  131. </div>
  132. </body>