+ set purpose page, task #95115.

2023-07-03 11:46:45 +08:00
parent 5804d57e31
commit 5a2361dc29
6 changed files with 203 additions and 3 deletions
@@ -210,9 +210,26 @@ class ai extends control
     */
    public function promptSetPurpose($promptID)
    {
-        $this->view->promptID   = $promptID;
-        $this->view->title      = $this->lang->ai->prompts->setPurpose . " {$this->lang->colon} " . $this->lang->ai->prompts->common;
-        $this->view->position[] = $this->lang->ai->prompts->common;
+        $prompt = $this->ai->getPromptByID($promptID);
+
+        if($_POST)
+        {
+            $data = fixer::input('post')->get();
+
+            $prompt->purpose     = $data->purpose;
+            $prompt->elaboration = $data->elaboration;
+
+            $this->ai->updatePrompt($prompt);
+
+            if(dao::isError()) return $this->send(array('result' => 'fail', 'message' => dao::getError()));
+            return $this->send(array('result' => 'success', 'message' => $this->lang->saveSuccess, 'locate' => $this->inlink('promptSetTargetForm', "promptID=$promptID") . '#app=admin'));
+        }
+
+        $this->view->dataPreview = ''; // TODO: Provide data preview with model method.
+        $this->view->prompt      = $prompt;
+        $this->view->promptID    = $promptID;
+        $this->view->title       = $this->lang->ai->prompts->setPurpose . " {$this->lang->colon} " . $this->lang->ai->prompts->common;
+        $this->view->position[]  = $this->lang->ai->prompts->common;
        $this->display();
    }

@@ -52,6 +52,16 @@ $lang->ai->prompts->selectedFormat   = 'Selecting data from {0}, {1} fields sele
 $lang->ai->prompts->nonSelected      = 'No data selected.';
 $lang->ai->prompts->sortTip          = 'Sorting fields by priority is suggested.';

+/* Purpose setting. */
+$lang->ai->prompts->purpose        = 'Purpose';
+$lang->ai->prompts->purposeTip     = '';
+$lang->ai->prompts->elaboration    = 'Elaboration';
+$lang->ai->prompts->elaborationTip = '';
+$lang->ai->prompts->inputPreview   = 'Prompt Preview';
+$lang->ai->prompts->dataPreview    = 'Data Prompt Preview';
+$lang->ai->prompts->rolePreview    = 'Role Prompt Preview';
+$lang->ai->prompts->promptPreview  = 'Purpose Prompt Preview';
+
 /* Data source definition. */
 $lang->ai->dataSource = array();
 $lang->ai->dataSource['story']['common']     = 'Story';
@@ -52,6 +52,16 @@ $lang->ai->prompts->selectedFormat   = 'Selecting data from {0}, {1} fields sele
 $lang->ai->prompts->nonSelected      = 'No data selected.';
 $lang->ai->prompts->sortTip          = 'Sorting fields by priority is suggested.';

+/* Purpose setting. */
+$lang->ai->prompts->purpose        = 'Purpose';
+$lang->ai->prompts->purposeTip     = '';
+$lang->ai->prompts->elaboration    = 'Elaboration';
+$lang->ai->prompts->elaborationTip = '';
+$lang->ai->prompts->inputPreview   = 'Prompt Preview';
+$lang->ai->prompts->dataPreview    = 'Data Prompt Preview';
+$lang->ai->prompts->rolePreview    = 'Role Prompt Preview';
+$lang->ai->prompts->promptPreview  = 'Purpose Prompt Preview';
+
 /* Data source definition. */
 $lang->ai->dataSource = array();
 $lang->ai->dataSource['story']['common']     = 'Story';
@@ -52,6 +52,16 @@ $lang->ai->prompts->selectedFormat   = 'Selecting data from {0}, {1} fields sele
 $lang->ai->prompts->nonSelected      = 'No data selected.';
 $lang->ai->prompts->sortTip          = 'Sorting fields by priority is suggested.';

+/* Purpose setting. */
+$lang->ai->prompts->purpose        = 'Purpose';
+$lang->ai->prompts->purposeTip     = '';
+$lang->ai->prompts->elaboration    = 'Elaboration';
+$lang->ai->prompts->elaborationTip = '';
+$lang->ai->prompts->inputPreview   = 'Prompt Preview';
+$lang->ai->prompts->dataPreview    = 'Data Prompt Preview';
+$lang->ai->prompts->rolePreview    = 'Role Prompt Preview';
+$lang->ai->prompts->promptPreview  = 'Purpose Prompt Preview';
+
 /* Data source definition. */
 $lang->ai->dataSource = array();
 $lang->ai->dataSource['story']['common']     = 'Story';
@@ -52,6 +52,16 @@ $lang->ai->prompts->selectedFormat   = '已选对象为{0}，已选 {1} 条数
 $lang->ai->prompts->nonSelected      = '暂无所选数据。';
 $lang->ai->prompts->sortTip          = '可根据重要性给数据字段排序。';

+/* Purpose setting. */
+$lang->ai->prompts->purpose        = '操作';
+$lang->ai->prompts->purposeTip     = '';
+$lang->ai->prompts->elaboration    = '补充要求';
+$lang->ai->prompts->elaborationTip = '';
+$lang->ai->prompts->inputPreview   = '输入预览';
+$lang->ai->prompts->dataPreview    = '对象数据预览';
+$lang->ai->prompts->rolePreview    = '角色提词预览';
+$lang->ai->prompts->promptPreview  = '操作提词预览';
+
 /* Data source definition. */
 $lang->ai->dataSource = array();
 $lang->ai->dataSource['story']['common']     = '需求';
@@ -10,4 +10,147 @@
 */
 ?>
 <?php include '../../common/view/header.html.php';?>
+
+<style>
+  .center-wrapper {display: flex; justify-content: center; height: 100%;}
+  .center-content {width: 100%; height: 100%; display: flex; flex-direction: column;}
+  #purpose-setter {display: flex; flex-direction: row;}
+  #purpose-setter > div {flex-grow: 1; flex-basis: 0; padding: 0px 12px;}
+  .content-row {display: flex; flex-direction: row; padding: 8px 0px;}
+  .input-label {width: 120px; padding: 6px 12px; text-align: right;}
+  .input {flex-grow: 1;}
+  #prompt-preview-wrapper {padding: 6px 0;}
+  #prompt-preview {padding: 8px 0; padding: 8px; border: 1px solid #ccc; border-radius: 4px; background-color: #f7f8f9; min-height: 100px;}
+  #prompt-preview {cursor: default; user-select: none;}
+  #prompt-preview .active {background-color: #d6e5fe;}
+  #prompt-preview .prompt-data, #prompt-preview .prompt-role, #prompt-preview .prompt-text {border-bottom: 1px solid #ccc; padding: 16px 0;}
+  #prompt-preview .prompt-data {padding-top: 0;}
+  #prompt-preview .prompt-text {border-bottom: unset; padding-bottom: 0;}
+  #prompt-preview .block-header {padding-bottom: 8px;}
+  #prompt-preview .block-content > div + div {margin-top: 4px;}
+  #prompt-preview .prompt-text-part + .prompt-text-part {margin-top: 4px;}
+  #prompt-previewer {font-weight: bold;}
+</style>
+
+<script>
+class PromptPreviewer extends HTMLDivElement
+{
+  connectedCallback()
+  {
+    if(this.isConnected)
+    {
+      ['purpose', 'elaboration'].forEach(id =>
+      {
+        ['input', 'focus', 'blur'].forEach(event => document.getElementById(id).addEventListener(event, this.updatePromptView));
+      });
+    }
+    this.render();
+  }
+
+  render()
+  {
+    this.innerHTML = '';
+
+    /* Create textarea input preview. */
+    ['purpose', 'elaboration'].forEach(id =>
+    {
+      const contentView = document.createElement('div');
+      contentView.id = `${id}-preview`;
+      contentView.classList.add('prompt-text-part');
+      contentView.innerHTML = document.getElementById(id).value;
+      if(id === document.activeElement.id) contentView.classList.add('active');
+      this.appendChild(contentView);
+    });
+  }
+
+  updatePromptView()
+  {
+    /* Sync textarea input preview. */
+    ['purpose', 'elaboration'].forEach(id =>
+    {
+      const contentView = document.getElementById(`${id}-preview`);
+      contentView.innerHTML = document.getElementById(id).value;
+      if(id === document.activeElement.id)
+      {
+        contentView.classList.add('active');
+      }
+      else
+      {
+        contentView.classList.remove('active');
+      }
+    });
+  }
+}
+customElements.define('prompt-previewer', PromptPreviewer, {extends: 'div'});
+</script>
+
+<div id='mainMenu' class='clearfix' style='display: flex; flex-direction: row;'>
+  <?php echo html::backButton("<i class='icon icon-back icon-sm'></i> $lang->goback", '', 'btn btn-info');?>
+  <?php include 'promptdesignprogressbar.html.php';?>
+  <?php echo html::commonButton("<i class='icon icon-save icon-sm'></i> $lang->save", '', 'btn btn-primary');?>
+</div>
+<div id='mainContent' class='main-content' style='height: calc(100vh - 120px);'>
+  <form class='load-indicator main-form form-ajax' method='post' style='height: 100%;'>
+    <div class='center-wrapper'>
+      <div class='center-content'>
+        <div id='purpose-setter'>
+          <div id='purpose-input'>
+            <h4><?php echo $lang->ai->prompts->purpose;?></h4>
+            <div class='content-row'>
+              <div class='input-label'><span><?php echo $lang->ai->prompts->purpose;?></span></div>
+              <div class='input'><?php echo html::textarea('purpose', $prompt->purpose, "class='form-control' rows='6' placeholder='{$lang->ai->prompts->purposeTip}' required");?></div>
+            </div>
+            <div class='content-row'>
+              <div class='input-label'><span><?php echo $lang->ai->prompts->elaboration;?></span></div>
+              <div class='input'><?php echo html::textarea('elaboration', $prompt->elaboration, "class='form-control' rows='6' placeholder='{$lang->ai->prompts->elaborationTip}'");?></div>
+            </div>
+          </div>
+          <div>
+            <h4><?php echo $lang->ai->prompts->inputPreview;?></h4>
+            <div id='prompt-preview-wrapper'>
+              <div id='prompt-preview'>
+                <div class='prompt-data'>
+                  <div class='block-header text-gray'><?php echo $lang->ai->prompts->dataPreview;?></div>
+                  <div class='block-content code' style='white-space: pre;'><?php echo $dataPreview;?></div>
+                </div>
+                <div class='prompt-role'>
+                  <div class='block-header text-gray'><?php echo $lang->ai->prompts->rolePreview;?></div>
+                  <div class='block-content'>
+                    <div><?php echo $prompt->role;?></div>
+                    <div><?php echo $prompt->characterization;?></div>
+                  </div>
+                </div>
+                <div class='prompt-text'>
+                  <div class='block-header text-gray'><?php echo $lang->ai->prompts->promptPreview;?></div>
+                  <div id='prompt-previewer' is='prompt-previewer'></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div style='display: flex; flex-grow: 1; flex-direction: column-reverse;'>
+          <div style='display: flex; justify-content: center;'><?php echo html::submitButton($lang->ai->nextStep, 'disabled');?></div>
+        </div>
+      </div>
+    </div>
+  </form>
+</div>
+
+<script>
+$(function()
+{
+  $('#purpose').on('input', function()
+  {
+    const val = $(this).val();
+    if(val.length > 0)
+    {
+      $('#submit').removeAttr('disabled');
+    }
+    else
+    {
+      $('#submit').attr('disabled', 'disabled');
+    }
+  });
+});
+</script>
 <?php include '../../common/view/footer.html.php';?>