* add role template panel.

This commit is contained in:
Chenjianyu
2023-08-01 10:11:25 +08:00
parent 417ee67d7a
commit e7678a5485
3 changed files with 61 additions and 26 deletions
+2
View File
@@ -105,6 +105,8 @@ $lang->ai->prompts->role = 'Role';
$lang->ai->prompts->characterization = 'Characterization';
$lang->ai->prompts->rolePlaceholder = '"Act as a <role>"';
$lang->ai->prompts->charPlaceholder = 'Detailed characterization of this role';
$lang->ai->prompts->roleTemplate = 'Role Template';
$lang->ai->prompts->roleTemplateTip = 'After a template is referenced, modifying the role or role description does not affect the template.';
/* Data source selecting. */
$lang->ai->prompts->selectData = 'Select data';
+2
View File
@@ -105,6 +105,8 @@ $lang->ai->prompts->role = '角色';
$lang->ai->prompts->characterization = '角色描述';
$lang->ai->prompts->rolePlaceholder = '“你来扮演 <一个什么角色>”';
$lang->ai->prompts->charPlaceholder = '该角色的具体描述信息';
$lang->ai->prompts->roleTemplate = '角色模版';
$lang->ai->prompts->roleTemplateTip = '引用模板后,修改角色、角色描述不会对模板造成影响。';
/* Data source selecting. */
$lang->ai->prompts->selectData = '选择数据';
+57 -26
View File
@@ -16,31 +16,42 @@
.content-row {display: flex; flex-direction: row; padding: 8px 0px;}
.input-label {width: 120px; padding: 6px 12px; text-align: right;}
.input {flex-grow: 1;}
.v-top > * {vertical-align: top; display: inline-block;}
</style>
<?php include 'promptdesignprogressbar.html.php';?>
<div id='mainContent' class='main-content' style='height: calc(100vh - 120px);'>
<div id='mainContent' class='main-content' style='height: calc(100vh - 120px); padding: 0;'>
<form id="mainForm" onsubmit="return validateForm();" class='load-indicator main-form form-ajax' method='post' style='height: 100%;'>
<div class='center-wrapper'>
<div class='center-content'>
<div>
<h4><?php echo $lang->ai->prompts->assignRole;?></h4>
<div class='content-row'>
<div class='input-label'><span><?php echo $lang->ai->prompts->model;?></span></div>
<div class='input mw-400px'>
<?php echo html::select('model', $lang->ai->models->typeList, current(array_keys($lang->ai->models->typeList)), "class='form-control chosen' required");?>
<div class='center-content' style="width: 100%; display: flex; flex-direction: row;">
<div style="flex-grow: 1; padding: 20px;">
<div>
<div style="display: flex; justify-content: space-between; align-items: center;">
<h4><?php echo $lang->ai->prompts->assignRole;?></h4>
<?php echo html::commonButton("<span>{$lang->ai->prompts->roleTemplate}</span> " . "<icon class='icon icon-chevron-right'></icon> ", 'id="expandRoleTemplatePanel"', 'btn btn-info');?>
</div>
<div class='content-row'>
<div class='input-label'><span><?php echo $lang->ai->prompts->model;?></span></div>
<div class='input mw-400px'>
<?php echo html::select('model', $lang->ai->models->typeList, current(array_keys($lang->ai->models->typeList)), "class='form-control chosen' required");?>
</div>
</div>
<div class='content-row'>
<div class='input-label'><span><?php echo $lang->ai->prompts->role;?></span></div>
<div class='input mw-400px'><?php echo html::input('role', $prompt->role, "class='form-control' placeholder='{$lang->ai->prompts->rolePlaceholder}'");?></div>
</div>
<div class='content-row'>
<div class='input-label'><span><?php echo $lang->ai->prompts->characterization;?></span></div>
<div class='input'><?php echo html::textarea('characterization', $prompt->characterization, "class='form-control' rows='4' placeholder='{$lang->ai->prompts->charPlaceholder}'");?></div>
</div>
</div>
<div class='content-row'>
<div class='input-label'><span><?php echo $lang->ai->prompts->role;?></span></div>
<div class='input mw-400px'><?php echo html::input('role', $prompt->role, "class='form-control' placeholder='{$lang->ai->prompts->rolePlaceholder}'");?></div>
</div>
<div class='content-row'>
<div class='input-label'><span><?php echo $lang->ai->prompts->characterization;?></span></div>
<div class='input'><?php echo html::textarea('characterization', $prompt->characterization, "class='form-control' rows='4' placeholder='{$lang->ai->prompts->charPlaceholder}'");?></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 name="jumpToNext" value="1"');?></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 name="jumpToNext" value="1"');?></div>
<div id="roleTemplate" style="display: none; flex-basis: 370px; flex-grow: 0; padding: 20px 24px; border-left: 1px solid #E6EAF1; background-color: #FCFDFE; border-top-right-radius: 4px; border-bottom-right-radius: 4px;">
<h4 class="v-top"">
<?php echo "<span style='padding-right: 4px;'>{$lang->ai->prompts->roleTemplate}</span>" . " <i class='icon icon-help' data-toggle='tooltip' data-placement='top' title='{$lang->ai->prompts->roleTemplateTip}'></i>";?>
</h4>
</div>
</div>
</div>
@@ -58,15 +69,35 @@ function validateForm()
}
return pass;
}
$(function()
{
$('select[name="model"]').change(function()
{
var model = $(this).val();
if(model) $('button[type="submit"]').removeAttr('disabled');
if(!model) $('button[type="submit"]').attr('disabled', 'disabled');
});
$('select[name="model"]').trigger('change');
$(function () {
$('[data-toggle="tooltip"]').tooltip();
$('select[name="model"]').change(function () {
var model = $(this).val();
if (model) $('button[type="submit"]').removeAttr('disabled');
if (!model) $('button[type="submit"]').attr('disabled', 'disabled');
});
$('select[name="model"]').trigger('change');
});
(function()
{
const expandRoleTemplatePanel = document.getElementById('expandRoleTemplatePanel');
if(expandRoleTemplatePanel)
{
expandRoleTemplatePanel.addEventListener('click', function(e)
{
const roleTemplate = document.getElementById('roleTemplate');
const isPanelExpanded = roleTemplate.style.display === 'block';
expandRoleTemplatePanel.querySelector('icon').className = isPanelExpanded ? 'icon icon-chevron-right' : 'icon icon-chevron-left';
if(roleTemplate)
{
roleTemplate.style.display = isPanelExpanded ? 'none' : 'block';
}
});
}
})();
</script>
<?php include '../../common/view/footer.html.php';?>