想要在 HTML 代码中删除文本区域和提交按钮之间的线。

huangapple
go评论52阅读模式
英文:

Want to remove the lines between text area and the submit buttons in html code

问题

以下是您要翻译的内容：

  1. I want to remove the space between the text area row and submit button.

    • 我想要删除文本区域行和提交按钮之间的空格。

  2. I want no white space or lines between the "Ask your question" text box and the submit button below.

    • 我不希望在“提问您的问题”文本框和下面的提交按钮之间有空白或分隔线。

  3. Also, I also want to move the UPLOAD button to the same Line/Row as "choose file".

    • 同样，我也想将上传按钮移动到与“选择文件”在同一行/行的位置。

PS: I am not using any separate CSS file.

  • 备注：我没有使用任何单独的CSS文件。
英文:

I am very new to HTML, learning after 20 years, please help. This may be an easy question for all of you, sorry for posting it here as I am not able to solve it myself. In the below code,

  1. I want to remove the space between the text area row and submit
    button    .
  2. I want no white space or lines between the "Ask your question"
    text box and the submit button below.
  3. Also, I also want to move the UPLOAD button to the same Line/Row
    as "choose file"

PS: I am not using any separate CSS file.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;Upload PDF&lt;/title&gt;
  &lt;style&gt;
    body {
      background-color: #f2f2f2;
      font-size: 12px;
      font-family: Arial, sans-serif;
    }
    
    input[type=&quot;file&quot;] {
      border: none !important;
      color: orange;
    }
    
    .heading {
      color: orange;
      text-align: left;
      font-size: 14px;
    }
    
    textarea {
      width: 100%;
      margin-bottom: 6px;
      padding: 12px 20px;
      box-sizing: border-box;
      font-size: 12px;
      border: 2px solid #ccc;
      border-radius: 4px;
      resize: vertical;
      white-space: pre-line;
      overflow: auto;
    }
    
    button {
      margin-top: 0px;
      margin-right: 5px;
      font-size: 10px;
      background: #ff8a26;
      border: none;
      color: #fff;
      padding: 0.5% 1%;
      border-radius: 6px !important;
    }
    
    button:hover {
      background-color: #FF4500;
    }
    
    .my-form {
      background: #f7fbfc !important;
    }
    
    h3 {
      color: rgb(157, 46, 46);
    }
  &lt;/style&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot; /&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class=&quot;container mt-3&quot;&gt;
    &lt;h3&gt;Extract, Search and Ask using LLM&lt;/h3&gt;

    &lt;div class=&quot;card mt-3 px-5 pb-5 pt-4 shadow-lg my-form&quot;&gt;
      &lt;!-- Upload section --&gt;
      &lt;h2 class=&quot;heading&quot;&gt;Upload a File&lt;/h2&gt;
      &lt;form method=&quot;POST&quot; enctype=multipart/form-data&gt;
        &lt;input type=&quot;file&quot; name=&quot;file&quot;&gt;&lt;br&gt;&lt;br&gt;
        &lt;button type=&quot;submit&quot; name=&quot;action&quot; value=&quot;Upload&quot;&gt;Upload&lt;/button&gt;
      &lt;/form&gt;

      &lt;!-- Extracted data display --&gt;
      &lt;h2 class=&quot;heading pt-3&quot;&gt;Report Data&lt;/h2&gt;
      &lt;textarea rows=&quot;4&quot; readonly&gt;{{ extracted_text }}&lt;/textarea&gt;

      &lt;!-- Question and Answer section --&gt;
      &lt;h2 class=&quot;heading pt-3&quot;&gt;Ask Your Question&lt;/h2&gt;
      &lt;form method=&quot;POST&quot;&gt;
        &lt;!-- height of textarea can be changed as per requirement by changing the &quot;rows&quot; value --&gt;
        &lt;textarea name=&quot;question&quot; rows=&quot;1&quot;&gt;{{ request.form.question }}&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;
        &lt;button type=&quot;submit&quot; name=&quot;action&quot; value=&quot;Ask&quot;&gt;Submit&lt;/button&gt;
      &lt;/form&gt;

      &lt;h2 class=&quot;heading pt-3&quot;&gt;GPT Response&lt;/h2&gt;
      &lt;textarea rows=&quot;3&quot; readonly&gt;{{ response }}&lt;/textarea&gt;
    &lt;/div&gt;

  &lt;/div&gt;





  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js&quot; integrity=&quot;sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js&quot; crossorigin&gt;&lt;/script&gt;

  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js&quot; crossorigin&gt;&lt;/script&gt;

  &lt;script src=&quot;https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js&quot; crossorigin&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;

<!-- end snippet -->

答案1

得分: 1

你可以通过移除所有的&lt;br&gt;换行标签来解决这两个问题。

在&lt;input&gt;文件后面有两个，&lt;textarea&gt;后面也有两个。

以下代码片段只是复制了你的代码，并删除了这些标签：

<!DOCTYPE html>
<html>

<head>
  <title>Upload PDF</title>
  <style>
    body {
      background-color: #f2f2f2;
      font-size: 12px;
      font-family: Arial, sans-serif;
    }
    
    input[type="file"] {
      border: none !important;
      color: orange;
    }
    
    .heading {
      color: orange;
      text-align: left;
      font-size: 14px;
    }
    
    textarea {
      width: 100%;
      margin-bottom: 6px;
      padding: 12px 20px;
      box-sizing: border-box;
      font-size: 12px;
      border: 2px solid #ccc;
      border-radius: 4px;
      resize: vertical;
      white-space: pre-line;
      overflow: auto;
    }
    
    button {
      margin-top: 0px;
      margin-right: 5px;
      font-size: 10px;
      background: #ff8a26;
      border: none;
      color: #fff;
      padding: 0.5% 1%;
      border-radius: 6px !important;
    }
    
    button:hover {
      background-color: #FF4500;
    }
    
    .my-form {
      background: #f7fbfc !important;
    }
    
    h3 {
      color: rgb(157, 46, 46);
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
</head>

<body>
  <div class="container mt-3">
    <h3>Extract, Search and Ask using LLM</h3>

    <div class="card mt-3 px-5 pb-5 pt-4 shadow-lg my-form">
      <!-- Upload section -->
      <h2 class="heading">Upload a File</h2>
      <form method="POST" enctype=multipart/form-data>
        <input type="file" name="file">
        <button type="submit" name="action" value="Upload">Upload</button>
      </form>

      <!-- Extracted data display -->
      <h2 class="heading pt-3">Report Data</h2>
      <textarea rows="4" readonly>{{ extracted_text }}</textarea>

      <!-- Question and Answer section -->
      <h2 class="heading pt-3">Ask Your Question</h2>
      <form method="POST">
        <!-- height of textarea can be changed as per requirement by changing the "rows" value -->
        <textarea name="question" rows="1">{{ request.form.question }}</textarea>
        <button type="submit" name="action" value="Ask">Submit</button>
      </form>

      <h2 class="heading pt-3">GPT Response</h2>
      <textarea rows="3" readonly>{{ response }}</textarea>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
</body>

</html>
英文:

You can solve both your problems by removing all the &lt;br&gt; line break tags.

You have two after the file &lt;input&gt;, and two after the &lt;textarea&gt;.

The below snippet is just a copy of yours with those tags removed:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-html -->

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Upload PDF&lt;/title&gt;
&lt;style&gt;
body {
background-color: #f2f2f2;
font-size: 12px;
font-family: Arial, sans-serif;
}
input[type=&quot;file&quot;] {
border: none !important;
color: orange;
}
.heading {
color: orange;
text-align: left;
font-size: 14px;
}
textarea {
width: 100%;
margin-bottom: 6px;
padding: 12px 20px;
box-sizing: border-box;
font-size: 12px;
border: 2px solid #ccc;
border-radius: 4px;
resize: vertical;
white-space: pre-line;
overflow: auto;
}
button {
margin-top: 0px;
margin-right: 5px;
font-size: 10px;
background: #ff8a26;
border: none;
color: #fff;
padding: 0.5% 1%;
border-radius: 6px !important;
}
button:hover {
background-color: #FF4500;
}
.my-form {
background: #f7fbfc !important;
}
h3 {
color: rgb(157, 46, 46);
}
&lt;/style&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container mt-3&quot;&gt;
&lt;h3&gt;Extract, Search and Ask using LLM&lt;/h3&gt;
&lt;div class=&quot;card mt-3 px-5 pb-5 pt-4 shadow-lg my-form&quot;&gt;
&lt;!-- Upload section --&gt;
&lt;h2 class=&quot;heading&quot;&gt;Upload a File&lt;/h2&gt;
&lt;form method=&quot;POST&quot; enctype=multipart/form-data&gt;
&lt;input type=&quot;file&quot; name=&quot;file&quot;&gt;
&lt;button type=&quot;submit&quot; name=&quot;action&quot; value=&quot;Upload&quot;&gt;Upload&lt;/button&gt;
&lt;/form&gt;
&lt;!-- Extracted data display --&gt;
&lt;h2 class=&quot;heading pt-3&quot;&gt;Report Data&lt;/h2&gt;
&lt;textarea rows=&quot;4&quot; readonly&gt;{{ extracted_text }}&lt;/textarea&gt;
&lt;!-- Question and Answer section --&gt;
&lt;h2 class=&quot;heading pt-3&quot;&gt;Ask Your Question&lt;/h2&gt;
&lt;form method=&quot;POST&quot;&gt;
&lt;!-- height of textarea can be changed as per requirement by changing the &quot;rows&quot; value --&gt;
&lt;textarea name=&quot;question&quot; rows=&quot;1&quot;&gt;{{ request.form.question }}&lt;/textarea&gt;
&lt;button type=&quot;submit&quot; name=&quot;action&quot; value=&quot;Ask&quot;&gt;Submit&lt;/button&gt;
&lt;/form&gt;
&lt;h2 class=&quot;heading pt-3&quot;&gt;GPT Response&lt;/h2&gt;
&lt;textarea rows=&quot;3&quot; readonly&gt;{{ response }}&lt;/textarea&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js&quot; integrity=&quot;sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js&quot; crossorigin&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js&quot; crossorigin&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js&quot; crossorigin&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

<!-- end snippet -->

答案2

得分: 0

你的&lt;textarea&gt;后有2个换行符。去掉一个，你的代码就应该能工作。

<!DOCTYPE html>
<html>
<head>
  <title>上传PDF</title>
  <style>
    body {
      background-color: #f2f2f2;
      font-size: 12px;
      font-family: Arial, sans-serif;
    }
    
    input[type="file"] {
      border: none !important;
      color: orange;
    }
    
    .heading {
      color: orange;
      text-align: left;
      font-size: 14px;
    }
    
    textarea {
      width: 100%;
      margin-bottom: 0;
      padding: 12px 20px;
      box-sizing: border-box;
      font-size: 12px;
      border: 2px solid #ccc;
      border-radius: 4px;
      resize: vertical;
      white-space: pre-line;
      overflow: auto;
    }
    
    button {
      margin-top: 0;
      margin-right: 5px;
      font-size: 10px;
      background: #ff8a26;
      border: none;
      color: #fff;
      padding: 0.5% 1%;
      border-radius: 6px !important;
    }
    
    button:hover {
      background-color: #FF4500;
    }
    
    .my-form {
      background: #f7fbfc !important;
    }
    
    h3 {
      color: rgb(157, 46, 46);
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous" />
</head>
<body>
  <div class="container mt-3">
    <h3>使用LLM提取、搜索和提问</h3>
    <div class="card mt-3 px-5 pb-5 pt-4 shadow-lg my-form">
      <!-- 上传部分 -->
      <h2 class="heading">上传文件</h2>
      <form method="POST" enctype=multipart/form-data>
        <input type="file" name="file"><br><br>
        <button type="submit" name="action" value="Upload">上传</button>
      </form>
      <!-- 提取的数据展示 -->
      <h2 class="heading pt-3">报告数据</h2>
      <textarea rows="4" readonly>{{ extracted_text }}</textarea>
      <!-- 问题和答案部分 -->
      <h2 class="heading pt-3">提问您的问题</h2>
      <form method="POST">
        <!-- 可根据需要更改文本区域的高度，通过更改"rows"的值 -->
        <textarea name="question" rows="1">{{ request.form.question }}</textarea><br><br>
        <button type="submit" name="action" value="Ask">提交</button>
      </form>
      <h2 class="heading pt-3">GPT回复</h2>
      <textarea rows="3" readonly>{{ response }}</textarea>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js" crossorigin></script>
  <script src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>
</body>
</html>
英文:

You have 2 line breaks after your &lt;textarea&gt;. Get rid of one and your code should work

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Upload PDF&lt;/title&gt;
&lt;style&gt;
body {
background-color: #f2f2f2;
font-size: 12px;
font-family: Arial, sans-serif;
}
input[type=&quot;file&quot;] {
border: none !important;
color: orange;
}
.heading {
color: orange;
text-align: left;
font-size: 14px;
}
textarea {
width: 100%;
margin-bottom: 0;
padding: 12px 20px;
box-sizing: border-box;
font-size: 12px;
border: 2px solid #ccc;
border-radius: 4px;
resize: vertical;
white-space: pre-line;
overflow: auto;
}
button {
margin-top: 0;
margin-right: 5px;
font-size: 10px;
background: #ff8a26;
border: none;
color: #fff;
padding: 0.5% 1%;
border-radius: 6px !important;
}
button:hover {
background-color: #FF4500;
}
.my-form {
background: #f7fbfc !important;
}
h3 {
color: rgb(157, 46, 46);
}
&lt;/style&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css&quot; integrity=&quot;sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65&quot; crossorigin=&quot;anonymous&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class=&quot;container mt-3&quot;&gt;
&lt;h3&gt;Extract, Search and Ask using LLM&lt;/h3&gt;
&lt;div class=&quot;card mt-3 px-5 pb-5 pt-4 shadow-lg my-form&quot;&gt;
&lt;!-- Upload section --&gt;
&lt;h2 class=&quot;heading&quot;&gt;Upload a File&lt;/h2&gt;
&lt;form method=&quot;POST&quot; enctype=multipart/form-data&gt;
&lt;input type=&quot;file&quot; name=&quot;file&quot;&gt;&lt;br&gt;&lt;br&gt;
&lt;button type=&quot;submit&quot; name=&quot;action&quot; value=&quot;Upload&quot;&gt;Upload&lt;/button&gt;
&lt;/form&gt;
&lt;!-- Extracted data display --&gt;
&lt;h2 class=&quot;heading pt-3&quot;&gt;Report Data&lt;/h2&gt;
&lt;textarea rows=&quot;4&quot; readonly&gt;{{ extracted_text }}&lt;/textarea&gt;
&lt;!-- Question and Answer section --&gt;
&lt;h2 class=&quot;heading pt-3&quot;&gt;Ask Your Question&lt;/h2&gt;
&lt;form method=&quot;POST&quot;&gt;
&lt;!-- height of textarea can be changed as per requirement by changing the &quot;rows&quot; value --&gt;
&lt;textarea name=&quot;question&quot; rows=&quot;1&quot;&gt;{{ request.form.question }}&lt;/textarea&gt;&lt;br&gt;&lt;br&gt;
&lt;button type=&quot;submit&quot; name=&quot;action&quot; value=&quot;Ask&quot;&gt;Submit&lt;/button&gt;
&lt;/form&gt;
&lt;h2 class=&quot;heading pt-3&quot;&gt;GPT Response&lt;/h2&gt;
&lt;textarea rows=&quot;3&quot; readonly&gt;{{ response }}&lt;/textarea&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js&quot; integrity=&quot;sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js&quot; integrity=&quot;sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js&quot; crossorigin&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js&quot; crossorigin&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js&quot; crossorigin&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

huangapple
  • 本文由 发表于 2023年6月19日 11:34:29
  • 转载请务必保留本文链接：https://go.coder-hub.com/76503469.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定