@kumologica/kumologica-contrib-amazonbedrock
Version:
Kumologica Designer Node for Amazon Bedrock AI service
243 lines (224 loc) • 10.1 kB
HTML
<script type="text/x-kumologica" data-template-name="Bedrock">
<style scoped>
.hiddenAttrs {display:none;}
.visibleAttrs {display:block;}
</style>
<div class="kumo-window">
<!-- Display name -->
<div class="kumo-section">
<div class="kumo-row">
<label class="kumo-row-label" for="node-input-name"> <span>Display Name</span></label>
<input class="kumo-row-editable" type="text" id="node-input-name" placeholder="Name">
</div>
</div>
<!-- General Settings -->
<div class="kumo-section-title">General</div>
<div class="kumo-section">
<div class="kumo-row">
<label class="kumo-row-label" for="node-input-operation">Operation</label>
<select class="kumo-row-editable" type="text" id="node-input-operation">
<option value="InvokeModel">InvokeModel</option>
<option value="ListModels">ListModels</option>
;
</select>
</div>
</br>
<div id="AttrHolder">
<div class="form-row" id='ModelIdAttr'>
<label class="kumo-row-label" for="node-input-ModelId">Model</label>
<input type="text" id="node-input-ModelId" placeholder="ModelId or InferenceId"></input>
</div>
<div class="form-row" id='VersionAttr' class='hiddenAttrs' style="margin-top: 15px;">
<label for="node-input-Version">Version</label>
<input type="text" id="node-input-Version" placeholder="Bedrock Version"></input>
</div>
<div class="form-row" id='SystemPromptAttr'>
<label class="kumo-row-label" for="node-input-SystemPrompt">Prompt</label>
<input type="text" id="node-input-SystemPrompt" placeholder="System Prompt"></input>
</div>
<div class="form-row" id='MessagesAttr' class='hiddenAttrs'>
<label for="node-input-Messages">Messages</label>
<input type="text" id="node-input-Messages" placeholder="Messages"></input>
</div>
<div class="form-row" id='MaxTokenAttr' class='hiddenAttrs'>
<label for="node-input-MaxToken">MaxToken</label>
<input type="text" id="node-input-MaxToken" placeholder="MaxToken"></input>
</div>
</div>
<div class="kumo-row-with-margin">
<label class="kumo-row-label" for="node-input-ReqTimeout"> <span>Request Timeout</span></label>
<input class="kumo-row-editable" type="text" id="node-input-ReqTimeout" placeholder="Request timeout">
</div>
</div>
<!-- Security Settings -->
<div class="kumo-section-title">Security</div>
<div class="kumo-section">
<div id="SecurityTypeGroup">
<input type="hidden" id="node-input-SecurityType"></input>
<table>
<tbody>
<tr>
<td><label for="node-input-credentials">Implicit</label>
</td><td></td><td></td>
<td><input class="kumo-row-editable" type="radio" name="implicitsecuritytype" value="Implicit" style="vertical-align: super;"></td>
<td></td><td></td><td></td><td></td><td></td>
<td><label for="node-input-assumeRole">Credentials</label>
</td><td></td><td></td>
<td><input class="kumo-row-editable" type="radio" name="credsecuritytype" value="Credentials" style="vertical-align: super;"></td>
</tr>
</tbody>
</table>
<div id="Credentials" class="desc" style="display: none;">
<div class="kumo-row-with-margin">
<label class="kumo-row-label" for="node-input-AccessKey"> <span>Access Key</span></label>
<input class="kumo-row-editable" type="password" id="node-input-AccessKey" placeholder="AWS Access Key Id">
<i class="fa fa-eye-slash" id="togglekey" style="margin: -4%; cursor: pointer"></i>
</div>
<div class="kumo-row-with-margin">
<label class="kumo-row-label" for="node-input-AccessSecret"> <span>Access Secret</span></label>
<input class="kumo-row-editable" type="password" id="node-input-AccessSecret" placeholder="AWS Access Secret">
<i class="fa fa-eye-slash" id="togglesecret" style="margin: -4%; cursor: pointer"></i>
</div>
<div class="kumo-row-with-margin">
<label class="kumo-row-label" for="node-input-Rolearn"> <span>RoleARN</span></label>
<input class="kumo-row-editable" type="text" id="node-input-Rolearn" placeholder="Optional">
</div>
<div class="kumo-row-with-margin">
<label class="kumo-row-label" for="node-input-Region"> <span>Region</span></label>
<input class="kumo-row-editable" type="text" id="node-input-Region" placeholder="AWS Region">
</div>
</div>
<div id="Implicit" class="desc">
<div class="kumo-section-tips">
<div class="form-tips">
<div class="kumo-tip-icon"><span class="fa fa-book"></span></div>
<span>Implicit security mode will be using the lambda execution role during runtime.<br/>
For this security mode ensure to have your AWS profile properly configured.<br/>
Access credentials for this node during local testing will be taken from the local AWS profile.
</span>
</div>
</div>
</div>
</div>
</div>
<script>
var nodeOps={
InvokeModel:[
'#ModelIdAttr','#VersionAttr','#MessagesAttr','#MaxTokenAttr', '#SystemPromptAttr'
],
ListModels:[
]
};
$('#node-input-operation').on('change',function(){
$('#AttrHolder').children().addClass('hiddenAttrs').removeClass('visibleAttrs');
if (nodeOps[this.value])
$(nodeOps[this.value].join()).addClass('visibleAttrs').removeClass('hiddenAttrs');
});
$(document).ready(function() {
$("input[name='implicitsecuritytype']").click(function() {
var secval = $(this).val();
$("div.desc").hide();
$("#" + secval).show();
$("input[name='implicitsecuritytype']").prop("checked",true)
$("input[name='credsecuritytype']").prop("checked",false)
$("#node-input-SecurityType").val(secval);
});
$("input[name='credsecuritytype']").click(function() {
var secval = $(this).val();
$("div.desc").hide();
$("#" + secval).show();
$("input[name='implicitsecuritytype']").prop("checked",false)
$("input[name='credsecuritytype']").prop("checked",true)
$("#node-input-SecurityType").val(secval);
});
});
const togglesecret = document.querySelector('#togglesecret');
const secret = document.querySelector('#node-input-AccessSecret');
togglesecret.addEventListener('click', function (e) {
// toggle the type attribute
const type = secret.getAttribute('type') === 'password' ? 'text' : 'password';
secret.setAttribute('type', type);
// toggle the eye slash icon
this.classList.toggle('fa-eye');
this.classList.toggle('fa-eye-slash');
});
const togglekey = document.querySelector('#togglekey');
const key = document.querySelector('#node-input-AccessKey');
togglekey.addEventListener('click', function (e) {
// toggle the type attribute
const type = key.getAttribute('type') === 'password' ? 'text' : 'password';
key.setAttribute('type', type);
// toggle the eye slash icon
this.classList.toggle('fa-eye');
this.classList.toggle('fa-eye-slash');
});
</script>
<script type="text/javascript">
RED.nodes.registerType('Bedrock', {
category: 'aws',
color: '#19a78d',
defaults: {
operation: { value: 'InvokeModel' },
ModelId: { value: '', templateable: true },
Version: { value: '', templateable: true },
Messages: { value: '' ,templateable: true},
SystemPrompt: { value: '' ,templateable: true},
MaxToken: { value: '', templateable: true },
AccessKey: { value: '', templateable: true, password: true },
AccessSecret: { value: '', templateable: true, password: true },
Rolearn: { value: '', templateable: true },
Region: { value: '', templateable: true },
SecurityType: { value: '' },
ReqTimeout: { value: '' },
name: { value: 'Bedrock' }
},
inputs: 1,
outputs: 1,
outputLabels: ['data'],
icon: 'kumo_bedrock.png',
label: function () {
return this.name || 'Bedrock';
},
oneditprepare: function () {
if (this.SecurityType === '') {
this.SecurityType = 'Implicit';
}
$("div.desc").hide();
$("#" + this.SecurityType).show();
if (this.SecurityType === 'Credentials') {
$("input[name='implicitsecuritytype']").prop("checked", false)
$("input[name='credsecuritytype']").prop("checked", true)
} else {
$("input[name='implicitsecuritytype']").prop("checked", true)
$("input[name='credsecuritytype']").prop("checked", false)
}
}
});
</script>
<script type="text/x-kumologica" data-help-name="Bedrock">
<h4> Description </h4>
<p>Amazon Bedrock node is the client for connecting Amazon Bedrock AI service.The node supports 3 model providers i.e Amazon, Anthropic and Mistral.</p>
<h4> Properties </h4>
<ul>
<li><i>Operation</i> - The node supports ListModels and InvokeModel operations. ListModels operation list the model Ids and the provider name. InvokeModel executes request against a given model Id.</li>
<li><i>ModelId</i> - (Required). Unique Id associated with the model you are having access. For Amazon and Anthropic you need to use inference profile Id.</li>
<li><i>Version</i> - (Required). Amazon Bedrock version. This is only required for Anthropic provider.</li>
<li><i>Prompt</i> - (Optional). This is the system prompt message if you want to pass to your model.</li>
<li><i>Messages</i> - (Required). User message or request that is passed to your model.</li>
<li><i>MaxToken</i> - (Required). Maximum number of tokens allowed in your request.</li>
<li><i>Request Timeout</i> - (Optional). Maximum time allowed for the node complete the request. By default it is 15000 milliseconds.</li>
</ul>
<h4>Throws</h4>
<ul>
<li>AWSBedrockError</li>
<li>AWSClientError</li>
</ul>
<h4> Returns </h4>
Payload having the message object based on the Bedrock operation executed by node.
Payload can be accessed on the subsequent node using <code>msg.payload</code>.
<h4> More info </h4>
<ul>
<li><a href="https://docs.kumologica.com/docs/references/AI.html#aws-bedrock">Kumologica Documentation</a></li>
<li><a href="https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/BedrockRuntime.html">Amazon Bedrock Operations Reference</a></li>
</ul>
</script>