tbs093a
/
render.app.frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: tbs093a:feat/x_gpu/new_version
Branches Tags
tbs093a:feat/x_gpu/chat_gpt_new_version
tbs093a:feat/x_gpu/new_version
tbs093a:develop
tbs093a:release/v0.1.0
tbs093a:feature/2_forms
tbs093a:feature/1_redux_localstorage
tbs093a:feature/0_redux_slices
tbs093a:hotfix
tbs093a:master
tbs093a:v0.1.0
tbs093a:v0.0.1
..
compare: tbs093a:master
Branches Tags
tbs093a:feat/x_gpu/chat_gpt_new_version
tbs093a:feat/x_gpu/new_version
tbs093a:develop
tbs093a:release/v0.1.0
tbs093a:feature/2_forms
tbs093a:feature/1_redux_localstorage
tbs093a:feature/0_redux_slices
tbs093a:hotfix
tbs093a:master
tbs093a:v0.1.0
tbs093a:v0.0.1

No commits in common. "feat/x_gpu/new_version" and "master" have entirely different histories.
feat/x_gpu ... master

36 changed files with 12320 additions and 29083 deletions
Show Stats Expand all files Collapse all files

3
.dockerignore
View File

@ -1,3 +0,0 @@
node_modules/
.cache/

2
.gitignore vendored
View File

@ -1,3 +1,3 @@
node_modules/
.cache/
public/
public

11
Dockerfile.nginx
View File

@ -1,11 +0,0 @@
FROM nginx:latest
WORKDIR /
RUN rm /usr/share/nginx/html/*
COPY ./public ./usr/share/nginx/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

9
Dockerfile.nodejs
View File

@ -1,9 +0,0 @@
FROM node:18.19.1-alpine
WORKDIR /app
COPY . ./
RUN npm install --silent --force
CMD ["npm", "run", "build"]

13
default.conf
View File

@ -1,13 +0,0 @@
server {
listen 80;
listen [::]:80;
root /var/www/work_front/html;
index index.html index.htm index.nginx-debian.html;
server_name work_front www.work_front;
location / {
try_files $uri $uri/ =404;
}
}

37261
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
package.json
View File

@ -8,18 +8,17 @@
"gatsby"
],
"scripts": {
"develop": "gatsby develop --host=0.0.0.0",
"start": "gatsby develop --host=0.0.0.0",
"develop": "gatsby develop",
"start": "gatsby develop",
"build": "gatsby build",
"serve": "gatsby serve",
"clean": "gatsby clean"
},
"dependencies": {
"gatsby": "^5.13.3",
"gatsby-plugin-sass": "^6.13.1",
"react": "^18",
"react-dom": "^18",
"react-particles-js": "^3.4.1",
"gatsby": "^2.32.3",
"gatsby-plugin-sass": "^3.2.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"sass": "^1.32.7"
}
}

91
src/components/foot.js
View File

@ -1,91 +0,0 @@
import React from 'react';
import '../styles/general.scss';
import SmallCubeComponent from './smallCube.js';
const FootComponent = () => {
return (
<footer>
<div className="content-container">
<div className="content">
<div className="section">
<SmallCubeComponent />
</div>
<div className="section">
<h4>
<a>
BUSINESS
</a>
</h4>
<h4>
<a>
SIGN IN
</a>
</h4>
<h4>
<a>
SIGN UP
</a>
</h4>
</div>
</div>
<div className="content">
<div className="section">
<h4>
Company
</h4>
</div>
<div className="section">
<a>
About Us
</a>
</div>
<div className="section">
<a>
Contact Us
</a>
</div>
</div>
<div className="content">
<div className="section">
<h4>
Resources
</h4>
</div>
<div className="section">
<a>
Blog
</a>
</div>
<div className="section">
<a>
Help Center
</a>
</div>
</div>
<div className="content">
<div className="section">
</div>
</div>
<div className="content">
<div className="section">
</div>
</div>
<div className="content">
<div className="section">
</div>
</div>
</div>
<div className="bottom">
<p>
&copy; {new Date().getFullYear()} FehuDev. All rights reserved.
</p>
</div>
</footer>
)
}
export default FootComponent

265
src/components/forms/abstractWebsocket.js
View File

@ -1,265 +0,0 @@
import React, { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { renderWebsocketSelector } from '../../redux/slices/renderWebsocketSlice'
import { connect, saveMessage, resetMessages, disconnect } from '../../redux/slices/renderWebsocketSlice'
import FormGenerator from './formGenerator'
const ProgressBar = () => {
const {
percents,
connect
} = useSelector( renderWebsocketSelector )
return (
<div className="progress_bar_form">
<div>
{
typeof percents === 'number'
? 'Progress: ' + percents + '%'
: percents
}
</div>
<div>
{
!isNaN(percents)
&& percents.toString().indexOf('.') != -1
? <div
className='progress_bar_progress'
style={ { width: percents + '%', height: '100%', backgroundColor: 'green' } }
>
</div>
: percents === 'render success'
? <div
className='progress_bar_progress'
style={ { width: '100%', height: '100%', backgroundColor: 'green' } }
>
</div>
: <></>
}
</div>
</div>
)
}
const AbstractWebsocket = ({ addressWS, inputList, refList, bodyComparer }) => {
const [web_socket, setWebsocket] = useState(null)
const dispatch = useDispatch()
const {
web_socket_address,
address,
room_uuid,
messages,
connected
} = useSelector( renderWebsocketSelector )
const handleConnect = ( event ) => {
event.preventDefault()
if ( web_socket === null && address === '' && room_uuid === '') {
dispatch(
connect(
{
address: addressWS
}
)
)
}
}
const handleSendMessage = ( refs ) => {
let body = bodyComparer( refs )
console.log( body )
try {
dispatch(
saveMessage(
{
message: { info: 0 } // start
}
)
)
web_socket.send(
JSON.stringify(
body
)
)
} catch (error) {
web_socket.close()
dispatch(
disconnect()
)
setWebsocket(null)
console.log(error)
}
}
const handleDisconnect = ( event ) => {
event.preventDefault()
if ( web_socket !== null && address !== '' && room_uuid !== '' ) {
try {
web_socket.close()
dispatch(
disconnect()
)
} catch (error) {
console.log(error)
}
} else if ( address !== '' && room_uuid !== '' ) {
dispatch(
disconnect()
)
}
setWebsocket(null)
console.log('disconnect')
}
useEffect(
() => {
if ( web_socket_address !== '' && web_socket === null ) {
console.log( 'connect' )
setWebsocket(new WebSocket( web_socket_address ))
}
if ( web_socket !== null ) {
web_socket.onmessage = (event) => {
console.log( event.data )
if ( messages[ messages.length - 1 ] !== JSON.parse( event.data ) ) {
dispatch(
saveMessage(
{
message: JSON.parse( event.data )
}
)
)
}
}
}
}
)
return (
<div>
<div
className="float_form_render_async"
style={
connected
? addressWS === '/vector/single/set/' || addressWS === '/vector/single/image/'
? { marginTop: '10%', overflowY: 'scroll' }
: { marginTop: '10%' }
: { marginTop: '100%' }
}
>
<FormGenerator
inputList={ inputList }
refList={ refList }
action={ handleSendMessage }
/>
</div>
<div className="float_form_connect">
<p>
{ addressWS }
</p>
<ProgressBar />
{
connected
?
<button onClick={ (event) => handleDisconnect(event) }>
Disconnect
</button>
:
<button onClick={ (event) => handleConnect(event) }>
Connect
</button>
}
</div>
<div
className="float_form_console"
style={ connected ? { marginTop: '25%', height: '200px' } : { marginTop: '15%', height: '10px' } }
>
<p>
console:
</p>
<div className="console_data">
{
messages.slice(0).reverse().map( (item) => {
return (
<div>
<>
{
Object.keys(item).map( (key) => {
if ( key == 'details' ) {
return (
<>
{
Object.keys(item[key]).map( (keyTwo) => {
return (
<div>
{ ' ' + keyTwo + ': ' + item[key][keyTwo] + ' ' }
</div>
)
}
)
}
</>
)
} else if ( key === 'image' ) {
return (
<img
src={ 'data:image/png;base64, ' + item[key] }
style={ { width: '300px', height: '150px' } }
/>
)
} else {
return (
<>
{ key + ': ' + item[key] + ' ' }
</>
)
}
}
)
}
</>
</div>
)
}
)
}
</div>
</div>
</div>
)
}
export default AbstractWebsocket

669
src/components/forms/formGenerator.js
View File

@ -1,669 +0,0 @@
import React, { useState } from 'react'
import passwordVisibleImg from '../../images/password-visible.png'
import passwordHiddenImg from '../../images/password-hidden.png'
/**
*
* @param { [ {}, {}, ...{} ] } inputList - list of dicts with info about input
* @param { [] } refList - react ref objects list for handler validation
* @param { } action - fetch method
*/
export const FormGenerator = ({
inputList, refList,
action
}) => {
const handler = async (event) => {
event.preventDefault()
if ( inputList[0].action === 'Async' ) {
await action(refList)
} else if (
inputList[0].action === 'Download'
|| inputList[0].action === 'Upload'
) {
await action()
} else {
for (let i = 0; i < refList.length; i++) {
if (refList[i].current.value === ''
&& inputList[0].action !== 'Update'
|| i === 0
&& refList.length !== 1
) {
refList[i].current.focus()
} else if (i === refList.length - 1) {
await action(refList)
}
}
}
}
let info
return (
<form onSubmit={event => handler(event)} className="form">
{
inputList.map((input, key) => {
if (input.type === 'info') {
info = input
} else if (input.type === 'text') {
return (
<TextInputGenerator
input={input}
info={info}
key={key}
/>
)
} else if (input.type === 'password') {
return (
<PasswordInputGenerator
input={input}
info={info}
key={key}
/>
)
} else if (input.type === 'links-listing') {
return (
<DownloadFilesListInputGenerator
input={input}
info={info}
key={key}
/>
)
} else if (input.type === 'file') {
return (
<UploadInputGenerator
input={input}
info={info}
key={key}
/>
)
} else if (input.type === 'choice-listing') {
return (
<ChoiceListingGenerator
input={input}
info={info}
key={key}
/>
)
} else if (input.type === 'range') {
return (
<RangeInputGenerator
input={input}
info={info}
key={key}
/>
)
} else if (input.type === 'vector') {
return (
<VectorInputGenerator
input={input}
info={info}
key={key}
/>
)
}
})
}
{
info.button_value === ''
? <></>
: <button
type='submit'
disabled={ info.allowButtonAction }
className={ info.allowButtonAction === false ? "button-disabled" : "" }
>
{ info.button_value }
</button>
}
</form>
)
}
/**
* Text input generator, example:
* @param {
* {
* type: 'text',
* name: 'name',
* ref: React.createRef(),
* onChange: null OR validationFunc
* validationInfo: null OR useState("")
* } } input - basic text input
* @param {
* {
* type: 'info',
* action: 'Update',
* endpoint: 'Album'
* } } info - information about form
*/
const TextInputGenerator = ({
input, info
}) => {
const [textInputValidationInfo, setTextInputValidationInfo] = useState("Empty")
const inputRegex = /^[^'";<>=]+$/
const defaultValidation = (event) => {
if (event.target.value === "") {
setTextInputValidationInfo("Empty")
} else if (!inputRegex.test(event.target.value)) {
setTextInputValidationInfo("Please provide correct value")
} else {
setTextInputValidationInfo("Success")
}
}
return (
<div className="form-field">
<label>
{input.name}
</label>
<input
id={input.name + info.action + info.endpoint + 'Input'}
autoComplete='off'
ref={input.ref}
onChange={ input.onChange === null ? defaultValidation : input.onChange}
className={
[ "Empty", "Success"].includes(
input.validationInfo === null ? textInputValidationInfo : input.validationInfo
) ? "" : "input-incorrect"
}
/>
<div
className="popup"
style={
[ "Empty", "Success"].includes(
input.validationInfo === null ? textInputValidationInfo : input.validationInfo
) ? {"display": "none", "height": "0px"} : {"display": "block"}
}
>
<div className="popup-content">
{ input.validationInfo === null ? textInputValidationInfo : input.validationInfo }
</div>
</div>
</div>
)
}
/**
* Text input generator, example:
* @param {
* {
* type: 'password',
* name: 'name',
* ref: React.createRef()
* } } input - basic text input
* @param {
* {
* type: 'info',
* action: 'Update'
* endpoint: 'Album'
* } } info - information about form
*/
const PasswordInputGenerator = ({
input, info
}) => {
const [contentIsHidden, setContentIsHidden] = useState(true)
return (
<div className="form-field">
<label>
{ input.name }
</label>
<div className="horizontal-container-input">
<input
id={input.name + info.action + info.endpoint + 'Input'}
autoComplete='off'
ref={input.ref}
type={ contentIsHidden ? 'password' : 'text' }
onChange={input.onChange}
className={ [ "Empty", "Success"].includes(input.validationInfo) ? "" : "input-incorrect" }
/>
<img
src={ contentIsHidden ? passwordHiddenImg : passwordVisibleImg }
className={ [ "Empty", "Success"].includes(input.validationInfo) ? "" : "input-visible-incorrect" }
onClick={ () => { setContentIsHidden(!contentIsHidden) } }
/>
</div>
<div
className="popup"
style={ [ "Empty", "Success"].includes(input.validationInfo) ? {"display": "none", "height": "0px"} : {"display": "block"} }
>
<div className="popup-content">
{ input.validationInfo }
</div>
</div>
</div>
)
}
const ObjectIterator = ({
object, divPlacer
}) => {
return(
<>
{
typeof object == "object" ?
Object.keys( object ).map(
( key ) => {
return (
<div key={ key }>
{ divPlacer( object[key] ) }
</div>
)
}
)
:
object
}
</>
)
}
/**
* Text input generator, example:
* @param {
* {
* type: 'drop-box',
* name: 'name',
* values: list,
* link: link to the file
* } } input - basic text input
* @param {
* {
* type: 'info',
* action: 'Update'
* endpoint: 'Album'
* } } info - information about form
*/
const DownloadFilesListInputGenerator = ({
input, info
}) => {
return (
<div
id={input.name + info.action + info.endpoint + 'DropBox'}
>
{input.name + ':'}
{
input.values.length == 0 ?
() => {
return (
<div>
empty
</div>
)
}
: input.values.map( (item, index) => {
return (
<>
<div
key={ info.action + '_element_' + index }
ls={ item }
>
{
typeof item == 'string' ?
item
: Object.keys(item).map(
( key, index ) => {
return(
<div style={{ paddingLeft: '10px' }}>
{ key + ': ' }
{
typeof item[key] === "object" ?
Object.keys( item[key] ).map(
( key_two, index ) => {
return (
<div style={{ paddingLeft: '20px' }}>
{ key_two + ': '}
{
typeof item[key][key_two] == 'object' ?
Object.keys( item[key][key_two] ).map(
(key_three, index) => {
return (
<div style={{ paddingLeft: '30px' }}>
{ key_three + ": " }
{ "x: " + item[key][key_two][key_three].x + ", " }
{ "y: " + item[key][key_two][key_three].y + ", " }
{ "z: " + item[key][key_two][key_three].z + ", " }
</div>
)
}
)
:
item[key][key_two]
}
</div>
)
}
)
:
item[key]
}
</div>
)
}
)
}
<br />
<br />
<a
href={ input.link + index + '/' }
>
download
</a>
</div>
<div style={{ width: '100%', height: '1px', backgroundColor: '#008000' }}>
</div>
</>
)
}
)
}
</div>
)
}
/**
* Text input generator, example:
* @param {
* {
* type: 'chice-listing',
* name: 'name',
* values: list,
* ref: React.createRef()
* } } input - basic text input
* @param {
* {
* type: 'info',
* action: 'Update'
* endpoint: 'Album'
* } } info - information about form
*/
const ChoiceListingGenerator = ({
input, info
}) => {
const __handleRef = ( event ) => {
event.preventDefault()
input.ref.current = {
value: event.target.value
}
}
return (
<div
id={input.name + info.action + info.endpoint + 'ChoiceListing'}
>
{input.name + ':'}
<select
onChange={ (event) => __handleRef( event ) }
>
<option
value={ '--Select-Model--' }
>
--Select-Model--
</option>
{
input.values.map( (item) => {
return (
<option
key={ item.model }
value={ item.model }
>
{ item.model.replace('.blend', '') }
</option>
)
}
)
}
</select>
</div>
)
}
/**
* Upload file input generator, example:
* @param {
* {
* type: 'file',
* name: 'name',
* endpoint: 'Album',
* fileType: 'image' or 'audio',
* dropInfo: dropInfo, setDropInfo: setDropInfo(), #useState
* file: file, setFile: setFile() #useState
* } } input -
*/
const UploadInputGenerator = ({
input, info
}) => {
const onLoadFile = async (event) => {
event.preventDefault()
let data = event.target.files[0]
// input.setFile(await toBase64(data))
input.setFile( data )
setDropInfos(data.name, data.size)
}
const onLoadFileDrop = async (event) => {
event.preventDefault()
event.persist()
let data = event.dataTransfer.files[0]
// input.setFile(await toBase64(data))
input.setFile( data )
setDropInfos(data.name, data.size)
}
const toBase64 = async (file) => new Promise((resolve, reject) => {
let fileReader = new FileReader()
fileReader.readAsDataURL(file)
fileReader.onload = () => resolve(fileReader.result)
fileReader.onerror = error => reject(error)
})
const setDropInfos = (name, size) => {
input.setDropInfo(
'name: "'
+ name
+ '"\nsize: '
+ (Math.round(size / 100 + 'e-2') / 100)
+ ' MB'
)
}
return (
<div onDrop={event => onLoadFileDrop(event)} >
<pre style={{ marginLeft: '40px' }}>
{input.dropInfo}
</pre>
<input
style={{ marginTop: '-55px' }}
id={input.name + info.action + info.endpoint + 'Input'}
className='upload_input'
type='file'
accept={input.fileType + '/*'}
autoComplete='off'
onChange={event => onLoadFile(event)}
/>
</div>
)
}
/**
* Text input generator, example:
* @param {
* {
* type: 'range',
* name: 'name',
* min: min range value,
* max: max range value,
* step: step of value,
* unit: unit of range value,
* ref: React.createRef()
* } } input - basic text input
* @param {
* {
* type: 'info',
* action: 'Update'
* endpoint: 'Album'
* } } info - information about form
*/
const RangeInputGenerator = ({
input, info
}) => {
let name = input.name + info.action + info.endpoint + 'Input'
const [value, setValue] = useState(0)
return (
<div>
<div>
{input.name + ': ' + value + ' ' + input.unit }
</div>
<input
style={ { width: '380px' } }
id={name}
name={name}
min={input.min}
max={input.max}
defaultValue={input.min}
step={input.step}
ref={input.ref}
type='range'
onChange={ event => setValue( event.target.value ) }
/>
</div>
)
}
const RangeGenerator = ({
key,
label,
labelStyle,
valueStyle,
style,
name,
unit,
min,
max,
defaultValue,
step,
reference
}) => {
const [value, setValue] = useState(0)
return (
<div style={ { display: 'flex' } }>
<div style={ labelStyle }>
{ label + ': ' }
</div>
<input
key={key}
style={ style }
id={ name }
name={ name }
min={min}
max={max}
defaultValue={ defaultValue }
step={step}
ref={reference}
type='range'
onChange={ event => setValue( event.target.value ) }
/>
<div style={ valueStyle }>
{ value + ' ' + unit }
</div>
</div>
)
}
/**
* Text input generator, example:
* @param {
* {
* type: 'vector',
* name: 'name',
* refDict:
* {
* x: React.createRef(),
* y: React.createRef(),
* z: React.createRef()
* }
* } } input - basic text input
* @param {
* {
* type: 'info',
* action: 'Update'
* endpoint: 'Album'
* } } info - information about form
*/
const VectorInputGenerator = ({
input, info
}) => {
return (
<div style={ { width: '' } }>
<div style={ { width: '100%' } }>
{ input.name }
</div>
<div style={ { display: 'flex' } }>
{
Object.keys(input.refDict).map( (key) => {
let name = input.name + key + info.action + info.endpoint + 'Input'
return (
<div style={ { display: 'flex', width: '140px' } }>
<RangeGenerator
key={key}
label={key}
labelStyle={ { width: '5px', marginTop: '15px' } }
valueStyle={ { width: '5px', marginTop: '15px', marginLeft: '5px' } }
style={ { width: '80px' } }
name={name}
unit={ '' }
min={input.min[key]}
max={input.max[key]}
defaultValue={ input.min[key] > 0 ? input.min[key] : 0 }
step={0.1}
reference={input.refDict[key]}
/>
</div>
)
}
)
}
</div>
</div>
)
}
export default FormGenerator

68
src/components/forms/model_crud/modelShowModelsAndDownload.js
View File

@ -1,68 +0,0 @@
import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
import { GeneralAddress } from '../../../redux/asyncThunks/abstracts/abstractAddress'
import FormGenerator from '../formGenerator'
const ModelShowAndDownloadForm = () => {
const dispatch = useDispatch()
const { models_list } = useSelector( modelCrudSelector )
const { user, token } = useSelector( userAuthSelector )
let blocker = false
useEffect(
() => {
if ( models_list.length === 0 && user.id > 0 && token !== '' && !blocker ) {
dispatch( modelCrudAsyncThunk.fetchGetAllModels(token) )
if ( models_list.length === 0 ) {
blocker = true
}
}
}
)
let inputList = [
{
type: 'info',
action: 'Download',
endpint: 'model/download',
button_value: 'Refresh Models List'
},
{
type: 'links-listing',
name: 'Models',
values: models_list,
link: GeneralAddress + '/model/',
}
]
const handleRefresh = () => {
dispatch( modelCrudAsyncThunk.fetchGetAllModels(token) )
}
return (
<div
className="float_form_model"
style={ { marginTop: '10%' , overflowY: 'scroll', height: '500px' } }
>
<FormGenerator
inputList={ inputList }
refList={ [] }
action={ handleRefresh }
/>
</div>
)
}
export default ModelShowAndDownloadForm

72
src/components/forms/model_crud/modelUpload.js
View File

@ -1,72 +0,0 @@
import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
import FormGenerator from '../formGenerator'
const ModelUploadForm = () => {
const dispatch = useDispatch()
const [blend, setBlend] = useState('')
const [blendInfo, setBlendInfo] = useState('Drop/Click\nfor upload "*.blend" file')
const { upload_blend_file_status } = useSelector( modelCrudSelector )
const { user, token } = useSelector( userAuthSelector )
let inputList = [
{
type: 'info',
action: 'Upload',
endpint: 'model/upload',
button_value: 'Upload Model'
},
{
type: 'file',
name: 'Model',
fileType: 'blender',
dropInfo: blendInfo,
setDropInfo: setBlendInfo,
file: blend,
setFile: setBlend
}
]
const handleModelUpload = () => {
let body = {
user_id: user.id,
file: blend,
token: token
}
console.log( body )
dispatch( modelCrudAsyncThunk.fetchUploadModel( body ) )
}
return (
<div
className="float_form_model"
style={ { marginTop: '17%'} }
>
<FormGenerator
inputList={ inputList }
refList={ [] }
action={ handleModelUpload }
/>
<p>
{
typeof upload_blend_file_status === 'string'
? ''
: 'info' in upload_blend_file_status
? upload_blend_file_status.info
: ''
}
</p>
</div>
)
}
export default ModelUploadForm

65
src/components/forms/render_crud/renderShowReadyRendersAndDownload.js
View File

@ -1,65 +0,0 @@
import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
import { renderCrudSelector } from '../../../redux/slices/renderCrudSlice'
import renderCrudAsyncThunk from '../../../redux/asyncThunks/renderCrudAsyncThunk'
import { GeneralAddress } from '../../../redux/asyncThunks/abstracts/abstractAddress'
import FormGenerator from '../formGenerator'
const RenderShowAndDownloadForm = () => {
const dispatch = useDispatch()
const { render_list } = useSelector( renderCrudSelector )
const { user, token } = useSelector( userAuthSelector )
let blocker = false
useEffect(
() => {
if ( render_list.length === 0 && user.id > 0 && token !== '' && !blocker ) {
dispatch( renderCrudAsyncThunk.fetchGetAllRenders( token ) )
if ( render_list.length === 0 ) {
blocker = true
}
}
}
)
let inputList = [
{
type: 'info',
action: 'Download',
endpint: 'model/download',
button_value: 'Refresh Renders List'
},
{
type: 'links-listing',
name: 'Renders',
values: render_list,
link: GeneralAddress + '/render/',
}
]
const handleRefresh = () => {
dispatch( renderCrudAsyncThunk.fetchGetAllRenders( token ) )
}
return (
<div className='float_form_render_sync'>
<FormGenerator
inputList={ inputList }
refList={ [] }
action={ handleRefresh }
/>
</div>
)
}
export default RenderShowAndDownloadForm

106
src/components/forms/render_websocket/renderAll.js
View File

@ -1,106 +0,0 @@
import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
import AbstractWebsocket from '../abstractWebsocket'
const RenderAllForm = () => {
const dispatch = useDispatch()
const choiceListing = React.createRef()
const rotateRange = React.createRef()
const resolutionXRange = React.createRef()
const resolutionYRange = React.createRef()
const { models_list } = useSelector( modelCrudSelector )
const { user, token } = useSelector( userAuthSelector )
let refList = [
choiceListing,
rotateRange,
resolutionXRange,
resolutionYRange,
]
let inputList = [
{
type: 'info',
action: 'Async',
endpint: 'render/async/all',
button_value: 'Render All Sets'
},
{
type: 'choice-listing',
name: 'Models',
values: models_list,
ref: choiceListing
},
{
type: 'range',
name: 'Rotate',
min: 1,
max: 360,
step: 1,
unit: 'deg',
ref: rotateRange
},
{
type: 'range',
name: 'Resolution X',
min: 600,
max: 4096,
step: 10,
unit: 'px',
ref: resolutionXRange
},
{
type: 'range',
name: 'Resolution Y',
min: 300,
max: 3112,
step: 10,
unit: 'px',
ref: resolutionYRange
},
]
useEffect(
() => {
if ( models_list.length === 0 && user.id > 0 && token !== '' ) {
dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
}
}
)
const bodyComparer = ( refs ) => {
return {
fileName: refs[0].current.value.replace('.blend', ''),
// fileName: 'testHand',
angle: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
resolutionX: refs[2].current.value,
resolutionY: refs[3].current.value,
}
}
return (
<div>
<AbstractWebsocket
addressWS={ '/all/' }
inputList={ inputList }
refList={ refList }
bodyComparer={ bodyComparer }
/>
</div>
)
}
export default RenderAllForm

136
src/components/forms/render_websocket/renderSingleImage.js
View File

@ -1,136 +0,0 @@
import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
import AbstractWebsocket from '../abstractWebsocket'
const RenderSingleImageForm = () => {
const dispatch = useDispatch()
const choiceListing = React.createRef()
const setIdRange = React.createRef()
const rotateRange = React.createRef()
const cameraIdRange = React.createRef()
const resolutionXRange = React.createRef()
const resolutionYRange = React.createRef()
const { models_list } = useSelector( modelCrudSelector )
const { user, token } = useSelector( userAuthSelector )
let refList = [
choiceListing,
setIdRange,
rotateRange,
cameraIdRange,
resolutionXRange,
resolutionYRange
]
let inputList = [
{
type: 'info',
action: 'Async',
endpint: 'render/async/single/image',
button_value: 'Render Single Image'
},
{
type: 'choice-listing',
name: 'Models',
values: models_list,
ref: choiceListing
},
{
type: 'range',
name: 'Set ID',
min: 0,
max: 87,
step: 1,
unit: 'set',
ref: setIdRange
},
{
type: 'range',
name: 'Rotate',
min: 1,
max: 360,
step: 1,
unit: 'deg',
ref: rotateRange
},
{
type: 'range',
name: 'Camera ID',
min: 0,
max: 1,
step: 1,
unit: 'camera index',
ref: cameraIdRange
},
{
type: 'range',
name: 'Resolution X',
min: 600,
max: 4096,
step: 10,
unit: 'px',
ref: resolutionXRange
},
{
type: 'range',
name: 'Resolution Y',
min: 300,
max: 3112,
step: 10,
unit: 'px',
ref: resolutionYRange
},
]
let blocker = false
useEffect(
() => {
if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) {
dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
if ( models_list.length === 0 ) {
blocker = true
}
}
}
)
const bodyComparer = ( refs ) => {
return {
fileName: refs[0].current.value.replace('.blend', ''),
// fileName: 'testHand',
setID: refs[1].current.value,
rotate: refs[2].current.value / 62, // on backend 0.1 - 6.2 value
cameraID: refs[3].current.value,
nameSeries: 0,
resolutionX: refs[4].current.value,
resolutionY: refs[5].current.value
}
}
return (
<div>
<AbstractWebsocket
addressWS={ '/single/image/' }
inputList={ inputList }
refList={ refList }
bodyComparer={ bodyComparer }
/>
</div>
)
}
export default RenderSingleImageForm

134
src/components/forms/render_websocket/renderSingleSet.js
View File

@ -1,134 +0,0 @@
import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
import AbstractWebsocket from '../abstractWebsocket'
const RenderSingleSetForm = () => {
const dispatch = useDispatch()
const choiceListing = React.createRef()
const setIdRange = React.createRef()
const cameraIdRange = React.createRef()
const resolutionXRange = React.createRef()
const resolutionYRange = React.createRef()
const angleRange = React.createRef()
const { models_list } = useSelector( modelCrudSelector )
const { user, token } = useSelector( userAuthSelector )
let refList = [
choiceListing,
setIdRange,
cameraIdRange,
resolutionXRange,
resolutionYRange,
angleRange
]
let inputList = [
{
type: 'info',
action: 'Async',
endpint: 'render/async/single/set',
button_value: 'Render Single Set'
},
{
type: 'choice-listing',
name: 'Models',
values: models_list,
ref: choiceListing
},
{
type: 'range',
name: 'Set ID',
min: 0,
max: 87,
step: 1,
unit: 'set',
ref: setIdRange
},
{
type: 'range',
name: 'Camera ID',
min: 0,
max: 1,
step: 1,
unit: 'camera index',
ref: cameraIdRange
},
{
type: 'range',
name: 'Resolution X',
min: 600,
max: 4096,
step: 10,
unit: 'px',
ref: resolutionXRange
},
{
type: 'range',
name: 'Resolution Y',
min: 300,
max: 3112,
step: 10,
unit: 'px',
ref: resolutionYRange
},
{
type: 'range',
name: 'Rotate',
min: 1,
max: 360,
step: 1,
unit: 'deg',
ref: angleRange
},
]
let blocker = false
useEffect(
() => {
if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) {
dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
if ( models_list.length === 0 ) {
blocker = true
}
}
}
)
const bodyComparer = ( refs ) => {
return {
fileName: refs[0].current.value.replace('.blend', ''),
// fileName: 'testHand',
setID: refs[1].current.value,
cameraID: refs[2].current.value,
resolutionX: refs[3].current.value,
resolutionY: refs[4].current.value,
angle: refs[5].current.value / 62, // on backend 0.1 - 6.2 value
}
}
return (
<div>
<AbstractWebsocket
addressWS={ '/single/set/' }
inputList={ inputList }
refList={ refList }
bodyComparer={ bodyComparer }
/>
</div>
)
}
export default RenderSingleSetForm

445
src/components/forms/render_websocket/renderVectorImage.js
View File

@ -1,445 +0,0 @@
import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
import AbstractWebsocket from '../abstractWebsocket'
const refVectorGenerator = () => {
return {
x: React.createRef(),
y: React.createRef(),
z: React.createRef(),
}
}
const RenderVectorSingleImageForm = () => {
const dispatch = useDispatch()
const choiceListing = React.createRef()
const rotateRange = React.createRef()
const cameraIdRange = React.createRef()
const resolutionXRange = React.createRef()
const resolutionYRange = React.createRef()
// const IK_nadgarstek = refVectorGenerator()
// const IK_joint3_R = refVectorGenerator()
// const IK_joint4_R = refVectorGenerator()
// const IK_joint5_R = refVectorGenerator()
// const IK_joint6_R = refVectorGenerator()
const IK_maly_1_R = refVectorGenerator()
const IK_maly_2_R = refVectorGenerator()
const IK_maly_3_R = refVectorGenerator()
const IK_serdeczny_1_R = refVectorGenerator()
const IK_serdeczny_2_R = refVectorGenerator()
const IK_serdeczny_3_R = refVectorGenerator()
const IK_srodkowy_1_R = refVectorGenerator()
const IK_srodkowy_2_R = refVectorGenerator()
const IK_srodkowy_3_R = refVectorGenerator()
const IK_wskazujacy_1_R = refVectorGenerator()
const IK_wskazujacy_2_R = refVectorGenerator()
const IK_wskazujacy_3_R = refVectorGenerator()
const IK_kciuk_0_R = refVectorGenerator()
const IK_kciuk_1_R = refVectorGenerator()
const IK_kciuk_2_R = refVectorGenerator()
const { models_list } = useSelector( modelCrudSelector )
const { user, token } = useSelector( userAuthSelector )
let refList = [
choiceListing,
rotateRange,
cameraIdRange,
resolutionXRange,
resolutionYRange,
{
// IK_nadgarstek: IK_nadgarstek,
// IK_joint3_R: IK_joint3_R,
// IK_joint4_R: IK_joint4_R,
// IK_joint5_R: IK_joint5_R,
// IK_joint6_R: IK_joint6_R,
IK_maly_1_R: IK_maly_1_R,
IK_maly_2_R: IK_maly_2_R,
IK_maly_3_R: IK_maly_3_R,
IK_serdeczny_1_R: IK_serdeczny_1_R,
IK_serdeczny_2_R: IK_serdeczny_2_R,
IK_serdeczny_3_R: IK_serdeczny_3_R,
IK_srodkowy_1_R: IK_srodkowy_1_R,
IK_srodkowy_2_R: IK_srodkowy_2_R,
IK_srodkowy_3_R: IK_srodkowy_3_R,
IK_wskazujacy_1_R: IK_wskazujacy_1_R,
IK_wskazujacy_2_R: IK_wskazujacy_2_R,
IK_wskazujacy_3_R: IK_wskazujacy_3_R,
IK_kciuk_0_R: IK_kciuk_0_R,
IK_kciuk_1_R: IK_kciuk_1_R,
IK_kciuk_2_R: IK_kciuk_2_R,
}
]
const fingers_max = {
x: 10,
y: 10,
z: 10
}
const fingers_min = {
x: -0.7,
y: -0.7,
z: -0.7
}
const validate_fingers = {
thumb: {
max:{
part_0: {
y: 0.5,
x: 0.5,
z: 0.6
},
part_1: {
y: 0,
x: 0,
z: 0.7,
},
part_2: {
y: 0,
x: 0,
z: 0.7,
}
},
min: {
part_0: {
y: -0.3,
x: 0,
z: -0.3,
},
part_1: {
y: -0.1,
x: 0,
z: 0,
},
part_2: {
y: 0,
x: 0,
z: -0.4,
}
}
},
others: {
max: {
part_1: {
y: 0.2,
x: 0,
z: 0.7
},
part_2: {
y: 0,
x: 0,
z: 1.6
},
part_3: {
y: 0,
x: 0,
z: 0.7
}
},
min: {
part_1: {
y: -0.3,
x: 0,
z: -0.3
},
part_2: {
y: 0,
x: 0,
z: 0
},
part_3: {
y: 0,
x: 0,
z: 0
}
}
}
}
let inputList = [
{
type: 'info',
action: 'Async',
endpint: 'render/async/single/image',
button_value: 'Render Single Image'
},
{
type: 'choice-listing',
name: 'Models',
values: models_list,
ref: choiceListing
},
{
type: 'range',
name: 'Rotate',
min: 1,
max: 360,
step: 1,
unit: 'deg',
ref: rotateRange
},
{
type: 'range',
name: 'Camera ID',
min: 0,
max: 1,
step: 1,
unit: 'camera index',
ref: cameraIdRange
},
{
type: 'range',
name: 'Resolution X',
min: 600,
max: 4096,
step: 10,
unit: 'px',
ref: resolutionXRange
},
{
type: 'range',
name: 'Resolution Y',
min: 300,
max: 3112,
step: 10,
unit: 'px',
ref: resolutionYRange
},
// {
// type: 'vector',
// name: 'Wirst (experimental)',
// native: 'Nadgarstek',
// min: fingers_min,
// max: fingers_max,
// refDict: IK_nadgarstek,
// },
// {
// type: 'vector',
// name: 'Litte Finger Joint 3 (experimental)',
// native: 'Mały Palec Joint 3',
// min: fingers_min,
// max: fingers_max,
// refDict: IK_joint3_R,
// },
// {
// type: 'vector',
// name: 'Ring Finger Joint 4 (experimental)',
// native: 'Serdeczny Palec Joint 4',
// min: fingers_min,
// max: fingers_max,
// refDict: IK_joint4_R,
// },
// {
// type: 'vector',
// name: 'Middle Finger Joint 5 (experimental)',
// native: 'Środkowy Palec Joint 5',
// min: fingers_min,
// max: fingers_max,
// refDict: IK_joint5_R,
// },
// {
// type: 'vector',
// name: 'Index Finger Joint 6 (experimental)',
// native: 'Wskazujący Palec Joint 6',
// min: fingers_min,
// max: fingers_max,
// refDict: IK_joint6_R,
// },
{
type: 'vector',
name: 'Litte Finger 1',
native: 'Mały 1',
min: validate_fingers.others.min.part_1,
max: validate_fingers.others.max.part_1,
refDict: IK_maly_1_R,
},
{
type: 'vector',
name: 'Litte Finger 2',
native: 'Mały 2',
min: validate_fingers.others.min.part_2,
max: validate_fingers.others.max.part_2,
refDict: IK_maly_2_R,
},
{
type: 'vector',
name: 'Litte Finger 3',
native: 'Mały 3',
min: validate_fingers.others.min.part_3,
max: validate_fingers.others.max.part_3,
refDict: IK_maly_3_R,
},
{
type: 'vector',
name: 'Ring Finger 1',
native: 'Serdeczny 1',
min: validate_fingers.others.min.part_1,
max: validate_fingers.others.max.part_1,
refDict: IK_serdeczny_1_R,
},
{
type: 'vector',
name: 'Ring Finger 2',
native: 'Serdeczny 2',
min: validate_fingers.others.min.part_2,
max: validate_fingers.others.max.part_2,
refDict: IK_serdeczny_2_R,
},
{
type: 'vector',
name: 'Ring Finger 3',
native: 'Serdeczny 3',
min: validate_fingers.others.min.part_3,
max: validate_fingers.others.max.part_3,
refDict: IK_serdeczny_3_R,
},
{
type: 'vector',
name: 'Middle Finger 1',
native: 'Środkowy 1',
min: validate_fingers.others.min.part_1,
max: validate_fingers.others.max.part_1,
refDict: IK_srodkowy_1_R,
},
{
type: 'vector',
name: 'Middle Finger 2',
native: 'Środkowy 2',
min: validate_fingers.others.min.part_2,
max: validate_fingers.others.max.part_2,
refDict: IK_srodkowy_2_R,
},
{
type: 'vector',
name: 'Middle Finger 3',
native: 'Środkowy 3',
min: validate_fingers.others.min.part_3,
max: validate_fingers.others.max.part_3,
refDict: IK_srodkowy_3_R,
},
{
type: 'vector',
name: 'Index Finger 1',
native: 'Wskazujący 1',
min: validate_fingers.others.min.part_1,
max: validate_fingers.others.max.part_1,
refDict: IK_wskazujacy_1_R,
},
{
type: 'vector',
name: 'Index Finger 2',
native: 'Wskazujący 2',
min: validate_fingers.others.min.part_2,
max: validate_fingers.others.max.part_2,
refDict: IK_wskazujacy_2_R,
},
{
type: 'vector',
name: 'Index Finger 3',
native: 'Wskazujący 3',
min: validate_fingers.others.min.part_3,
max: validate_fingers.others.max.part_3,
refDict: IK_wskazujacy_3_R,
},
{
type: 'vector',
name: 'Thumb 0',
native: 'Kciuk 0',
min: validate_fingers.thumb.min.part_0,
max: validate_fingers.thumb.max.part_0,
refDict: IK_kciuk_0_R,
},
{
type: 'vector',
name: 'Thumb 1',
native: 'Kciuk 1',
min: validate_fingers.thumb.min.part_1,
max: validate_fingers.thumb.max.part_1,
refDict: IK_kciuk_1_R,
},
{
type: 'vector',
name: 'Thumb 2',
native: 'Kciuk 2',
min: validate_fingers.thumb.min.part_2,
max: validate_fingers.thumb.max.part_2,
refDict: IK_kciuk_2_R,
},
]
let blocker = false
useEffect(
() => {
if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) {
dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
if ( models_list.length === 0 ) {
blocker = true
}
}
}
)
const bodyComparer = ( refs ) => {
let vectors = {}
console.log( refs )
Object.keys(refs[5]).map(
( key ) => {
let singleFinger = {
scale: 0,
x: 0,
y: 0,
z: 0
}
singleFinger['scale'] = 0.9
singleFinger['x'] = parseFloat(refs[5][key]['x'].current.value)
singleFinger['y'] = parseFloat(refs[5][key]['y'].current.value)
singleFinger['z'] = parseFloat(refs[5][key]['z'].current.value)
vectors[key] = singleFinger
}
)
return {
fileName: refs[0].current.value.replace('.blend', ''),
// fileName: 'testHand',
rotate: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
cameraID: refs[2].current.value,
nameSeries: 0,
resolutionX: refs[3].current.value,
resolutionY: refs[4].current.value,
vectors: vectors
}
}
return (
<div>
<AbstractWebsocket
addressWS={ '/vector/single/image/' }
inputList={ inputList }
refList={ refList }
bodyComparer={ bodyComparer }
/>
</div>
)
}
export default RenderVectorSingleImageForm

444
src/components/forms/render_websocket/renderVectorSet.js
View File

@ -1,444 +0,0 @@
import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
import { modelCrudSelector } from '../../../redux/slices/modelCrudSlice'
import modelCrudAsyncThunk from '../../../redux/asyncThunks/modelCrudAsyncThunk'
import AbstractWebsocket from '../abstractWebsocket'
const refVectorGenerator = () => {
return {
x: React.createRef(),
y: React.createRef(),
z: React.createRef(),
}
}
const RenderVectorSingleSetForm = () => {
const dispatch = useDispatch()
const choiceListing = React.createRef()
const rotateRange = React.createRef()
const cameraIdRange = React.createRef()
const resolutionXRange = React.createRef()
const resolutionYRange = React.createRef()
// const IK_nadgarstek = refVectorGenerator()
// const IK_joint3_R = refVectorGenerator()
// const IK_joint4_R = refVectorGenerator()
// const IK_joint5_R = refVectorGenerator()
// const IK_joint6_R = refVectorGenerator()
const IK_maly_1_R = refVectorGenerator()
const IK_maly_2_R = refVectorGenerator()
const IK_maly_3_R = refVectorGenerator()
const IK_serdeczny_1_R = refVectorGenerator()
const IK_serdeczny_2_R = refVectorGenerator()
const IK_serdeczny_3_R = refVectorGenerator()
const IK_srodkowy_1_R = refVectorGenerator()
const IK_srodkowy_2_R = refVectorGenerator()
const IK_srodkowy_3_R = refVectorGenerator()
const IK_wskazujacy_1_R = refVectorGenerator()
const IK_wskazujacy_2_R = refVectorGenerator()
const IK_wskazujacy_3_R = refVectorGenerator()
const IK_kciuk_0_R = refVectorGenerator()
const IK_kciuk_1_R = refVectorGenerator()
const IK_kciuk_2_R = refVectorGenerator()
const { models_list } = useSelector( modelCrudSelector )
const { user, token } = useSelector( userAuthSelector )
let refList = [
choiceListing,
rotateRange,
cameraIdRange,
resolutionXRange,
resolutionYRange,
{
// IK_nadgarstek: IK_nadgarstek,
// IK_joint3_R: IK_joint3_R,
// IK_joint4_R: IK_joint4_R,
// IK_joint5_R: IK_joint5_R,
// IK_joint6_R: IK_joint6_R,
IK_maly_1_R: IK_maly_1_R,
IK_maly_2_R: IK_maly_2_R,
IK_maly_3_R: IK_maly_3_R,
IK_serdeczny_1_R: IK_serdeczny_1_R,
IK_serdeczny_2_R: IK_serdeczny_2_R,
IK_serdeczny_3_R: IK_serdeczny_3_R,
IK_srodkowy_1_R: IK_srodkowy_1_R,
IK_srodkowy_2_R: IK_srodkowy_2_R,
IK_srodkowy_3_R: IK_srodkowy_3_R,
IK_wskazujacy_1_R: IK_wskazujacy_1_R,
IK_wskazujacy_2_R: IK_wskazujacy_2_R,
IK_wskazujacy_3_R: IK_wskazujacy_3_R,
IK_kciuk_0_R: IK_kciuk_0_R,
IK_kciuk_1_R: IK_kciuk_1_R,
IK_kciuk_2_R: IK_kciuk_2_R,
}
]
const fingers_max = {
x: 10,
y: 10,
z: 10
}
const fingers_min = {
x: -0.7,
y: -0.7,
z: -0.7
}
const validate_fingers = {
thumb: {
max:{
part_0: {
y: 0.5,
x: 0.5,
z: 0.6
},
part_1: {
y: 0,
x: 0,
z: 0.7,
},
part_2: {
y: 0,
x: 0,
z: 0.7,
}
},
min: {
part_0: {
y: -0.3,
x: 0,
z: -0.3,
},
part_1: {
y: -0.1,
x: 0,
z: 0,
},
part_2: {
y: 0,
x: 0,
z: -0.4,
}
}
},
others: {
max: {
part_1: {
y: 0.2,
x: 0,
z: 0.7
},
part_2: {
y: 0,
x: 0,
z: 1.6
},
part_3: {
y: 0,
x: 0,
z: 0.7
}
},
min: {
part_1: {
y: -0.3,
x: 0,
z: -0.3
},
part_2: {
y: 0,
x: 0,
z: 0
},
part_3: {
y: 0,
x: 0,
z: 0
}
}
}
}
let inputList = [
{
type: 'info',
action: 'Async',
endpint: 'render/async/single/set',
button_value: 'Render Single Set'
},
{
type: 'choice-listing',
name: 'Models',
values: models_list,
ref: choiceListing
},
{
type: 'range',
name: 'Rotate',
min: 1,
max: 360,
step: 1,
unit: 'deg',
ref: rotateRange
},
{
type: 'range',
name: 'Camera ID',
min: 0,
max: 1,
step: 1,
unit: 'camera index',
ref: cameraIdRange
},
{
type: 'range',
name: 'Resolution X',
min: 600,
max: 4096,
step: 10,
unit: 'px',
ref: resolutionXRange
},
{
type: 'range',
name: 'Resolution Y',
min: 300,
max: 3112,
step: 10,
unit: 'px',
ref: resolutionYRange
},
// {
// type: 'vector',
// name: 'Wirst (experimental)',
// native: 'Nadgarstek',
// min: fingers_min,
// max: fingers_max,
// refDict: IK_nadgarstek,
// },
// {
// type: 'vector',
// name: 'Litte Finger Joint 3 (experimental)',
// native: 'Mały Palec Joint 3',
// min: fingers_min,
// max: fingers_max,
// refDict: IK_joint3_R,
// },
// {
// type: 'vector',
// name: 'Ring Finger Joint 4 (experimental)',
// native: 'Serdeczny Palec Joint 4',
// min: fingers_min,
// max: fingers_max,
// refDict: IK_joint4_R,
// },
// {
// type: 'vector',
// name: 'Middle Finger Joint 5 (experimental)',
// native: 'Środkowy Palec Joint 5',
// min: fingers_min,
// max: fingers_max,
// refDict: IK_joint5_R,
// },
// {
// type: 'vector',
// name: 'Index Finger Joint 6 (experimental)',
// native: 'Wskazujący Palec Joint 6',
// min: fingers_min,
// max: fingers_max,
// refDict: IK_joint6_R,
// },
{
type: 'vector',
name: 'Litte Finger 1',
native: 'Mały 1',
min: validate_fingers.others.min.part_1,
max: validate_fingers.others.max.part_1,
refDict: IK_maly_1_R,
},
{
type: 'vector',
name: 'Litte Finger 2',
native: 'Mały 2',
min: validate_fingers.others.min.part_2,
max: validate_fingers.others.max.part_2,
refDict: IK_maly_2_R,
},
{
type: 'vector',
name: 'Litte Finger 3',
native: 'Mały 3',
min: validate_fingers.others.min.part_3,
max: validate_fingers.others.max.part_3,
refDict: IK_maly_3_R,
},
{
type: 'vector',
name: 'Ring Finger 1',
native: 'Serdeczny 1',
min: validate_fingers.others.min.part_1,
max: validate_fingers.others.max.part_1,
refDict: IK_serdeczny_1_R,
},
{
type: 'vector',
name: 'Ring Finger 2',
native: 'Serdeczny 2',
min: validate_fingers.others.min.part_2,
max: validate_fingers.others.max.part_2,
refDict: IK_serdeczny_2_R,
},
{
type: 'vector',
name: 'Ring Finger 3',
native: 'Serdeczny 3',
min: validate_fingers.others.min.part_3,
max: validate_fingers.others.max.part_3,
refDict: IK_serdeczny_3_R,
},
{
type: 'vector',
name: 'Middle Finger 1',
native: 'Środkowy 1',
min: validate_fingers.others.min.part_1,
max: validate_fingers.others.max.part_1,
refDict: IK_srodkowy_1_R,
},
{
type: 'vector',
name: 'Middle Finger 2',
native: 'Środkowy 2',
min: validate_fingers.others.min.part_2,
max: validate_fingers.others.max.part_2,
refDict: IK_srodkowy_2_R,
},
{
type: 'vector',
name: 'Middle Finger 3',
native: 'Środkowy 3',
min: validate_fingers.others.min.part_3,
max: validate_fingers.others.max.part_3,
refDict: IK_srodkowy_3_R,
},
{
type: 'vector',
name: 'Index Finger 1',
native: 'Wskazujący 1',
min: validate_fingers.others.min.part_1,
max: validate_fingers.others.max.part_1,
refDict: IK_wskazujacy_1_R,
},
{
type: 'vector',
name: 'Index Finger 2',
native: 'Wskazujący 2',
min: validate_fingers.others.min.part_2,
max: validate_fingers.others.max.part_2,
refDict: IK_wskazujacy_2_R,
},
{
type: 'vector',
name: 'Index Finger 3',
native: 'Wskazujący 3',
min: validate_fingers.others.min.part_3,
max: validate_fingers.others.max.part_3,
refDict: IK_wskazujacy_3_R,
},
{
type: 'vector',
name: 'Thumb 0',
native: 'Kciuk 0',
min: validate_fingers.thumb.min.part_0,
max: validate_fingers.thumb.max.part_0,
refDict: IK_kciuk_0_R,
},
{
type: 'vector',
name: 'Thumb 1',
native: 'Kciuk 1',
min: validate_fingers.thumb.min.part_1,
max: validate_fingers.thumb.max.part_1,
refDict: IK_kciuk_1_R,
},
{
type: 'vector',
name: 'Thumb 2',
native: 'Kciuk 2',
min: validate_fingers.thumb.min.part_2,
max: validate_fingers.thumb.max.part_2,
refDict: IK_kciuk_2_R,
},
]
let blocker = false
useEffect(
() => {
if ( models_list.length === 0 && user.id > 0 && token !== '' && blocker === false ) {
dispatch( modelCrudAsyncThunk.fetchGetAllModels( token ) )
if ( models_list.length === 0 ) {
blocker = true
}
}
}
)
const bodyComparer = ( refs ) => {
let vectors = {}
console.log( refs )
Object.keys(refs[5]).map(
( key ) => {
let singleFinger = {
scale: 0,
x: 0,
y: 0,
z: 0
}
singleFinger['scale'] = 0.9
singleFinger['x'] = parseFloat(refs[5][key]['x'].current.value)
singleFinger['y'] = parseFloat(refs[5][key]['y'].current.value)
singleFinger['z'] = parseFloat(refs[5][key]['z'].current.value)
vectors[key] = singleFinger
}
)
return {
fileName: refs[0].current.value.replace('.blend', ''),
// fileName: 'testHand',
angle: refs[1].current.value / 62, // on backend 0.1 - 6.2 value
cameraID: refs[2].current.value,
resolutionX: refs[3].current.value,
resolutionY: refs[4].current.value,
vectors: vectors
}
}
return (
<div>
<AbstractWebsocket
addressWS={ '/vector/single/set/' }
inputList={ inputList }
refList={ refList }
bodyComparer={ bodyComparer }
/>
</div>
)
}
export default RenderVectorSingleSetForm

71
src/components/forms/user_auth/userLogin.js
View File

@ -1,71 +0,0 @@
import React, { useState, useEffect } from 'react'
// import { useSelector, useDispatch } from 'react-redux'
// import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
// import userAuthAsyncThunk from '../../../redux/asyncThunks/userAuthAsyncThunk'
import FormGenerator from '../formGenerator'
const UserLoginForm = () => {
const usernameInput = React.createRef()
const passwordInput = React.createRef()
// const dispatch = useDispatch()
// const { info } = useSelector( userAuthSelector )
const info = "" // if redux is integrated - delete this line
let refList = [
usernameInput,
passwordInput
]
let inputList = [
{
type: 'info',
action: 'Create',
endpint: 'user/auth',
button_value: 'CONTINUE'
},
{
type: 'text',
name: 'EMAIL',
ref: usernameInput
},
{
type: 'password',
name: 'PASSWORD',
ref: passwordInput
}
]
const login = async ( refs ) => {
let pass = {
username: refs[0].current.value,
password: refs[1].current.value
}
// dispatch(
// userAuthAsyncThunk.fetchLogin(
// pass
// )
// )
}
return (
<div>
<FormGenerator
inputList={ inputList }
refList={ refList }
action={ login }
/>
<div className='form_info'>
{ info }
</div>
</div>
)
}
export default UserLoginForm

152
src/components/forms/user_auth/userRegister.js
View File

@ -1,152 +0,0 @@
import React, { useState, useEffect } from 'react'
// import { useSelector, useDispatch } from 'react-redux'
// import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
// import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
import FormGenerator from '../formGenerator'
const UserRegisterForm = () => {
const usernameInput = React.createRef()
const passwordInput = React.createRef()
const confirmPasswordInput = React.createRef()
const emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
const [usernameValidationInfo, setUsernameValidationInfo] = useState("Empty")
const [passwordValidationInfo, setPasswordValidationInfo] = useState("Empty")
const [confirmPasswordValidationInfo, setConfirmPasswordValidationInfo] = useState("Empty")
const [password, setPassword] = useState("")
const [confirmPassword, setConfirmPassword] = useState("")
const [allowButtonAction, setAllowButtonAction] = useState(false)
const usernameValidation = (event) => {
if (event.target.value === "") {
setUsernameValidationInfo("Email is required.")
} else if(!emailRegex.test(event.target.value)) {
setUsernameValidationInfo("Please provide correct email")
} else {
setUsernameValidationInfo("Success")
}
}
const passwordValidation = (event) => {
setPassword(event.target.value)
if (event.target.value === "") {
setPasswordValidationInfo("Password is required.")
} else if(!passwordRegex.test(event.target.value)) {
setPasswordValidationInfo("Password require:\n - At least 8 characters,\n - At least one uppercase letter,\n - At least one lowercase letter,\n - At least one digit,\n - At least one special character.")
} else {
setPasswordValidationInfo("Success")
}
if(event.target.value !== confirmPassword) {
setConfirmPasswordValidationInfo("Passwords are different.")
} else {
setConfirmPasswordValidationInfo("Success")
}
}
const confirmPasswordValidation = (event) => {
setConfirmPassword(event.target.value)
if(event.target.value !== password) {
setConfirmPasswordValidationInfo("Passwords are different.")
} else {
setConfirmPasswordValidationInfo("Success")
}
}
useEffect(() => {
setAllowButtonAction(
usernameValidationInfo === "Success"
&& passwordValidationInfo === "Success"
&& confirmPasswordValidationInfo === "Success"
)
}, [
allowButtonAction,
usernameValidationInfo,
passwordValidationInfo,
confirmPasswordValidationInfo
]
)
// const dispatch = useDispatch()
// const { info } = useSelector( userCrudSelector )
const info = "" // if redux is integrated - delete this line
let refList = [
usernameInput,
passwordInput,
confirmPasswordInput
]
let inputList = [
{
type: 'info',
action: 'Create',
endpint: 'user/auth/register',
button_value: 'SIGN UP',
allowButtonAction: allowButtonAction
},
{
type: 'text',
name: 'EMAIL',
ref: usernameInput,
onChange: usernameValidation,
validationInfo: usernameValidationInfo
},
{
type: 'password',
name: 'PASSWORD',
ref: passwordInput,
onChange: passwordValidation,
validationInfo: passwordValidationInfo
},
{
type: 'password',
name: 'CONFIRM PASSWORD',
ref: confirmPasswordInput,
onChange: confirmPasswordValidation,
validationInfo: confirmPasswordValidationInfo
}
]
const register = async ( refs ) => {
let pass = {
username: refs[0].current.value,
password: refs[1].current.value
}
// dispatch(
// userCrudAsyncThunk.fetchRegister(
// pass
// )
// )
}
return (
<div>
<FormGenerator
inputList={ inputList }
refList={ refList }
action={ register }
/>
<div className='form_info'>
{ info }
</div>
</div>
)
}
export default UserRegisterForm

77
src/components/forms/user_crud/userDelete.js
View File

@ -1,77 +0,0 @@
import React, { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
import { deleteUser } from '../../../redux/slices/userAuthSlice'
import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
import FormGenerator from '../formGenerator'
const UserDeleteForm = () => {
const usernameInput = React.createRef()
const { user, token } = useSelector( userAuthSelector )
const dispatch = useDispatch()
const { info } = useSelector( userCrudSelector )
let refList = [
usernameInput,
]
let inputList = [
{
type: 'info',
action: 'Create',
endpint: 'user/crud/delete',
button_value: 'Delete'
},
{
type: 'text',
name: 'Username',
ref: usernameInput
}
]
const handleDelete = async ( refs ) => {
if ( refs[0].current.value === user.username ) {
let pass = {
token: token,
user_id: user.id
}
dispatch(
deleteUser()
)
dispatch(
userCrudAsyncThunk.fetchDeleteUser(
pass
)
)
}
}
return (
<div
className="float_form_model"
style={ { marginTop: '17%'} }
>
<FormGenerator
inputList={ inputList }
refList={ refList }
action={ handleDelete }
/>
<div className='form_info'>
{ info }
</div>
</div>
)
}
export default UserDeleteForm

87
src/components/forms/user_crud/userUpdate.js
View File

@ -1,87 +0,0 @@
import React, { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { userCrudSelector } from '../../../redux/slices/userCrudSlice'
import { userAuthSelector } from '../../../redux/slices/userAuthSlice'
import userCrudAsyncThunk from '../../../redux/asyncThunks/userCrudAsyncThunk'
import FormGenerator from '../formGenerator'
const UserUpdateForm = () => {
const usernameInput = React.createRef()
const passwordInput = React.createRef()
const emailInput = React.createRef()
const dispatch = useDispatch()
const { info } = useSelector( userCrudSelector )
const { user, token } = useSelector( userAuthSelector )
let refList = [
usernameInput,
passwordInput,
emailInput
]
let inputList = [
{
type: 'info',
action: 'Create',
endpint: 'user/crud/update',
button_value: 'Update User'
},
{
type: 'text',
name: 'Username',
ref: usernameInput
},
{
type: 'password',
name: 'Password',
ref: passwordInput
},
{
type: 'text',
name: 'Email',
ref: emailInput
}
]
const update = async ( refs ) => {
let pass = {
user_id: user.id,
token: token,
user: {
username: refs[0].current.value,
password: refs[1].current.value,
email: refs[2].current.value,
}
}
dispatch(
userCrudAsyncThunk.fetchUpdateUser(
pass
)
)
}
return (
<div
className="float_form_model"
style={ { marginTop: '10%'} }
>
<FormGenerator
inputList={ inputList }
refList={ refList }
action={ update }
/>
<div className='form_info'>
{ info }
</div>
</div>
)
}
export default UserUpdateForm

22
src/components/largeCube.js
View File

@ -1,22 +0,0 @@
import React from 'react';
import '../styles/large.cube.scss';
const LargeCubeComponent = () => {
return (
<div className="graphic-container">
<div className="cube">
<div className="front"></div>
<div className="back"></div>
<div className="right"></div>
<div className="left"></div>
<div className="top"></div>
<div className="bottom"></div>
</div>
</div>
)
}
export default LargeCubeComponent

28
src/components/navbar.js
View File

@ -1,28 +0,0 @@
import React from 'react';
import '../styles/general.scss';
import SmallCubeComponent from './smallCube.js';
const NavBarComponent = () => {
return (
<div className="navbar">
<div className="content-container">
<div className="content">
<div className="section">
<SmallCubeComponent />
</div>
</div>
<div className="content">
<div className="section">
<h4>Menu |||</h4>
</div>
</div>
</div>
</div>
)
}
export default NavBarComponent

25
src/components/smallCube.js
View File

@ -1,25 +0,0 @@
import React from 'react';
import '../styles/small.cube.scss';
const SmallCubeComponent = () => {
return (
<div className="graphic-container">
<div className="cube">
<div className="face-front"></div>
<div className="face-back"></div>
<div className="face-right"></div>
<div className="face-left"></div>
<div className="face-top"></div>
<div className="face-bottom"></div>
</div>
<div className="title">
XGPU
</div>
</div>
)
}
export default SmallCubeComponent

BIN
src/images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 28 KiB

BIN
src/images/password-hidden.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
src/images/password-visible.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.6 KiB

54
src/pages/404.js 100644
View File

@ -0,0 +1,54 @@
import * as React from "react"
import { Link } from "gatsby"
// styles
const pageStyles = {
color: "#232129",
padding: "96px",
fontFamily: "-apple-system, Roboto, sans-serif, serif",
}
const headingStyles = {
marginTop: 0,
marginBottom: 64,
maxWidth: 320,
}
const paragraphStyles = {
marginBottom: 48,
}
const codeStyles = {
color: "#8A6534",
padding: 4,
backgroundColor: "#FFF4DB",
fontSize: "1.25rem",
borderRadius: 4,
}
// markup
const NotFoundPage = () => {
return (
<main style={pageStyles}>
<title>Not found</title>
<h1 style={headingStyles}>Page not found</h1>
<p style={paragraphStyles}>
Sorry{" "}
<span role="img" aria-label="Pensive emoji">
😔
</span>{" "}
we couldn’t find what you were looking for.
<br />
{process.env.NODE_ENV === "development" ? (
<>
<br />
Try creating a page in <code style={codeStyles}>src/pages/</code>.
<br />
</>
) : null}
<br />
<Link to="/">Go home</Link>.
</p>
</main>
)
}
export default NotFoundPage

147
src/pages/index.js
View File

@ -1,13 +1,150 @@
import React from 'react';
import * as React from "react"
import LoginPage from './user/login.js';
import LandingPage from './landing.js';
// styles
const pageStyles = {
color: "#232129",
padding: "96px",
fontFamily: "-apple-system, Roboto, sans-serif, serif",
}
const headingStyles = {
marginTop: 0,
marginBottom: 64,
maxWidth: 320,
}
const headingAccentStyles = {
color: "#663399",
}
const paragraphStyles = {
marginBottom: 48,
}
const codeStyles = {
color: "#8A6534",
padding: 4,
backgroundColor: "#FFF4DB",
fontSize: "1.25rem",
borderRadius: 4,
}
const listStyles = {
marginBottom: 96,
paddingLeft: 0,
}
const listItemStyles = {
fontWeight: "300",
fontSize: "24px",
maxWidth: "560px",
}
const linkStyle = {
color: "#8954A8",
fontWeight: "bold",
fontSize: "16px",
verticalAlign: "5%",
}
const docLinkStyle = {
...linkStyle,
listStyleType: "none",
marginBottom: 24,
}
const descriptionStyle = {
color: "#232129",
fontSize: "14px",
}
const docLink = {
text: "Documentation",
url: "https://www.gatsbyjs.com/docs/",
color: "#8954A8",
}
// data
const links = [
{
text: "Tutorial",
url: "https://www.gatsbyjs.com/docs/tutorial/",
description:
"A great place to get started if you're new to web development. Designed to guide you through setting up your first Gatsby site.",
color: "#E95800",
},
{
text: "How to Guides",
url: "https://www.gatsbyjs.com/docs/how-to/",
description:
"Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.",
color: "#1099A8",
},
{
text: "Reference Guides",
url: "https://www.gatsbyjs.com/docs/reference/",
description:
"Nitty-gritty technical descriptions of how Gatsby works. Most useful when you need detailed information about Gatsby's APIs.",
color: "#BC027F",
},
{
text: "Conceptual Guides",
url: "https://www.gatsbyjs.com/docs/conceptual/",
description:
"Big-picture explanations of higher-level Gatsby concepts. Most useful for building understanding of a particular topic.",
color: "#0D96F2",
},
{
text: "Plugin Library",
url: "https://www.gatsbyjs.com/plugins",
description:
"Add functionality and customize your Gatsby site or app with thousands of plugins built by our amazing developer community.",
color: "#000000",
},
]
// markup
const IndexPage = () => {
return (
<LandingPage />
<main style={pageStyles}>
<title>Home Page</title>
<h1 style={headingStyles}>
Congratulations
<br />
<span style={headingAccentStyles}>— you just made a Gatsby site! </span>
<span role="img" aria-label="Party popper emojis">
🎉🎉🎉
</span>
</h1>
<p style={paragraphStyles}>
Edit <code style={codeStyles}>src/pages/index.js</code> to see this page
update in real-time.{" "}
<span role="img" aria-label="Sunglasses smiley emoji">
😎
</span>
</p>
<ul style={listStyles}>
<li style={docLinkStyle}>
<a
style={linkStyle}
href={`${docLink.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
>
{docLink.text}
</a>
</li>
{links.map(link => (
<li key={link.url} style={{ ...listItemStyles, color: link.color }}>
<span>
<a
style={linkStyle}
href={`${link.url}?utm_source=starter&utm_medium=start-page&utm_campaign=minimal-starter`}
>
{link.text}
</a>
<p style={descriptionStyle}>{link.description}</p>
</span>
</li>
))}
</ul>
<img
alt="Gatsby G Logo"
src="data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm0 2c-3.73 0-6.86 2.55-7.75 6L14 19.75c3.45-.89 6-4.02 6-7.75h-5.25v1.5h3.45a6.37 6.37 0 01-3.89 4.44L6.06 9.69C7 7.31 9.3 5.63 12 5.63c2.13 0 4 1.04 5.18 2.65l1.23-1.06A7.959 7.959 0 0012 4zm-8 8a8 8 0 008 8c.04 0 .09 0-8-8z' fill='%23639'/%3E%3C/svg%3E"
/>
</main>
)
}
export default IndexPage

92
src/pages/landing.js
View File

@ -1,92 +0,0 @@
import React from 'react';
import '../styles/general.scss';
import UserRegisterForm from '../components/forms/user_auth/userRegister.js';
import FootComponent from '../components/foot.js';
import NavBarComponent from '../components/navbar.js';
const LandingPage = () => {
return (
<>
<NavBarComponent />
<div className="landing-container">
<header className="landing">
<h2>Affordable. Efficient. Accessible.</h2>
<h1>GUARANTED.</h1>
<p>
Minimize your expenses without compromising on quality.
<br />
Our platform is built for individuals who need top-tier rendering
<br />
<span className="span-white">
without the top-tier investment.
</span>
</p>
<button>
GET A DEMO
</button>
<h4>
GPU IS IMPORTANT...
</h4>
<p>
...But <span className="span-white">GPU server can be very expensive.</span>
<br />
Configuration and administration<span className="span-white"> take too long time.</span>
<br />
<span className="span-white">
Everything of that needs so much additional knowledge.
</span>
</p>
<h2>
We Offer Ready Solution.
</h2>
<p>
Boost your GPU power for your 3D and AI models stuff
<br />
<span className="span-white">
without overpay for servers...
</span>
<br />
<span className="span-white">
...without overtime for environment adjustments!
</span>
</p>
<h2>
"OK... So What Makes You So Different?"
</h2>
<h4>
GUARANTED
</h4>
<p>
We only win if you win. You won't carry all the risk, we'll share it
</p>
<h4>
RESLUTS
</h4>
<p>
Our first priority is to get you results.
</p>
<h4>
LOCAL
</h4>
<p>
</p>
<h4>
SPECIALIZED
</h4>
<p>
</p>
</header>
<main className="secondary-content">
<UserRegisterForm />
</main>
</div>
<FootComponent />
</>
)
}
export default LandingPage

24
src/pages/user/login.js
View File

@ -1,24 +0,0 @@
import React from 'react';
import '../../styles/general.scss';
import LargeCubeComponent from '../../components/largeCube.js';
import UserLoginForm from '../../components/forms/user_auth/userLogin.js';
const LoginPage = () => {
return (
<div className="login-container">
<header className="header">
<h1>XGPU</h1>
</header>
<main className="main-content">
<LargeCubeComponent />
<UserLoginForm />
</main>
</div>
)
}
export default LoginPage

104
src/styles/general.000.scss
View File

@ -1,104 +0,0 @@
// Define common variables
$background-base-start: rgba(0, 90, 25, 1);
$background-base-end: rgb(51,54,51, 1);
$header-background: 0;
$form-background: rgba(0,0,0,0.5);
$header-color: $form-background;
$button-background: green;
$border-color: green;
$input-background: #222;
$font-family-default: neue-haas-unica, sans-serif;
$login-form-font-color: #a6a6a6;
body, html {
height: 100%;
width: 100%;
margin: 0;
font-family: $font-family-default;
font-weight: 680;
tab-size: 4;
background: radial-gradient($background-base-start, $background-base-end 70%);
color: white;
display: flex;
justify-content: center; // Center horizontally
align-items: center; // Center vertically
}
.header {
text-align: center;
padding: 20px;
background: $header-background;
color: $header-color;
z-index: 3; // Ensure the login form is above the cube
position: relative; // Required for z-index to take effect
}
.login-container {
display: flex;
flex-direction: column;
margin-top: 0%;
border-radius: 5px;
.main-content {
//flex: 1;
//display: flex;
margin-top: 0%;
align-items: center;
justify-content: space-evenly;
.login-form {
background: $form-background;
padding: 50px;
width: 350px;
color: $login-form-font-color;
// border: 2px solid $border-color;
border-radius: 10px;
margin-top: -400px;
margin-right: auto;
margin-left: auto;
z-index: 2; // Ensure the login form is above the cube
position: relative; // Required for z-index to take effect
.form-field {
margin-bottom: 15px;
label {
display: block;
margin-bottom: 15px;
}
input {
width: 90%;
padding: 5%;
background: $input-background;
border: 1px solid $border-color;
border-radius: 5px;
color: white;
}
}
button {
padding: 5%;
width: 100%;
margin-top: 30px;
border-radius: 5px;
background: $button-background;
font-family: $font-family-default;
font-weight: 800;
color: rgba(0,0,0,0.5);
border: none;
cursor: pointer;
}
}
.graphic-container {
width: 400px;
height: 400px;
margin-right: auto;
margin-left: auto;
z-index: 1; // Lower z-index than the login form to place it behind
}
}
}

555
src/styles/general.scss
View File

@ -1,555 +0,0 @@
$first-color: rgba(0, 90, 25, 1);
$secondary-color: white;
$third-color: #242b2f;
$title-color: white;
$subtitle-color: #a6a6a6;
$marked-subtitle-color: $first-color;
$background-color: #242b2f;
$background-base-start: $first-color;
$background-base-end: rgb(51,54,51, 1);
$header-background: 0;
$form-background: rgba(0,0,0,0.5);
$header-color: $form-background;
$button-background: $first-color;
$border-color: $first-color;
$input-background: #222;
$font-family-default: neue-haas-unica, sans-serif;
body, html {
margin: 0 auto;
overflow-x: hidden;
font-family: $font-family-default;
tab-size: 4;
background: $background-color;
// linear-gradient(
// 10deg,
// black 0%,
// #0a670a 40%,
// #097309 50%,
// #0a670a 60%,
// black 100%
// );
.header {
text-align: center;
padding: 20px;
background: $header-background;
color: $header-color;
z-index: 3; // Ensure the login form is above the cube
position: relative; // Required for z-index to take effect
h1 {
font-size: 72px;
}
}
.landing-container {
display: flex;
flex-direction: column;
width: 100%;
.landing {
text-align: center;
padding: 20px;
width: 100%;
background: $header-background;
color: $title-color;
z-index: 3; // Ensure the login form is above the cube
position: relative; // Required for z-index to take effect
h1 {
font-size: 60px;
font-weight: 800;
color: $title-color;
}
h2 {
font-size: 60px;
font-weight: 700;
color: $title-color;
}
h3 {
font-size: 45px;
font-weight: 700;
color: $title-color;
}
h4 {
font-size: 30px;
font-weight: 700;
color: $title-color;
margin-bottom: 0px;
}
p {
font-size: 20px;
font-weight: 400;
color: $subtitle-color;
}
span {
font-size: 20px;
font-weight: 400;
padding-left: 5px;
}
.span-white {
color: $title-color;
}
.span-first-color {
color: $first-color;
}
button {
margin-top: 35px;
margin-bottom: 35px;
padding-top: 20px;
padding: 25px;
border-radius: 5px;
background: $button-background;
font-size: 20px;
font-family: $font-family-default;
font-weight: 800;
color: rgba(0,0,0,0.5);
border: none;
cursor: pointer;
transition-duration: 0.1s;
}
button:hover {
background-color: green;
color: black
}
}
}
.main-content {
margin-top: 0%;
align-items: center;
justify-content: space-evenly;
}
.secondary-content {
width: 100%;
background: $form-background;
.form {
background: none;
margin-top: 0px;
}
}
.form {
background: $form-background;
padding: 50px;
width: 350px;
color: $subtitle-color;
// border: 2px solid $border-color;
border-radius: 10px;
margin-top: -400px;
margin-right: auto;
margin-left: auto;
z-index: 2; // Ensure the login form is above the cube
position: relative; // Required for z-index to take effect
.form-field {
width: 100%;
margin-bottom: 15px;
label {
display: block;
margin-bottom: 15px;
text-align: left;
font-weight: 700;
}
input {
width: 90%;
padding: 5%;
background: $input-background;
border: 1px solid $border-color;
border-radius: 5px;
color: white;
transition-duration: 0.5s;
}
input:hover {
border-color: rgba(111,108,106,1);
}
input:active {
background-color: rgba(0,120,0,1);
}
.input-correct {
background: rgba(0,120,0,1);
border: 1px solid $border-color;
}
.input-incorrect {
background: rgba(120,8,0,1);
border: 1px solid red;
}
.horizontal-container-input {
display: block;
input {
width: 80%;
}
img {
float: right;
width: 20px;
height: 20px;
padding-top: 5%;
filter: invert(27%) sepia(97%) saturate(3498%) hue-rotate(97deg) brightness(98%) contrast(103%);
}
// convert hex to filter: https://codepen.io/sosuke/pen/Pjoqqp
.input-visible-incorrect {
filter: invert(8%) sepia(63%) saturate(4888%) hue-rotate(8deg) brightness(113%) contrast(112%);
}
}
}
.popup {
margin-top: 10px;
overflow: hidden;
padding: 15px;
background: rgba(120,8,0,0.5);
border: 1px solid red;
border-radius: 5px;
white-space: pre-line;
transition-duration: 0.5s;
.popup-content {
margin: 0 auto;
text-align: left;
}
}
button {
padding: 5%;
width: 100%;
margin-top: 30px;
border-radius: 5px;
background: $button-background;
font-family: $font-family-default;
font-weight: 700;
color: rgba(0,0,0,0.5);
border: none;
cursor: pointer;
transition-duration: 0.1s;
}
button:hover {
background-color: green;
color: black
}
.button-disabled {
background: gray;
}
}
footer {
width: 70%;
background: $form-background;
text-align: left;
padding: 20px 15%;
.content-container {
display: flex;
justify-content: space-between;
.content {
flex-direction: column;
margin-bottom: 20px;
.section {
flex: 1;
margin-top: 20px;
margin-bottom: 20px;
h4 {
color: $title-color;
margin-bottom: 5px;
margin-top: 5px;
}
.graphic-container {
margin-top: 20px;
}
p, a {
color: $subtitle-color;
line-height: 1.6;
text-decoration: none;
}
a:hover {
color: $title-color;
}
}
}
}
.bottom {
//border-top: 1px solid $subtitle-color;
padding-top: 10px;
text-align: left;
p {
font-size: 0.8em;
color: $subtitle-color;
}
}
}
}
.navbar {
position: fixed;
width: 70%;
background: $form-background;
text-align: left;
padding: 20px 15%;
z-index: 999;
.content-container {
display: flex;
justify-content: space-between;
.content {
flex-direction: column;
.section {
flex: 1;
margin-top: 20px;
margin-bottom: 20px;
h4 {
color: $title-color;
margin-bottom: 5px;
margin-top: 5px;
}
.graphic-container {
margin-top: 20px;
}
p, a {
color: $subtitle-color;
line-height: 1.6;
text-decoration: none;
}
a:hover {
color: $title-color;
}
}
}
}
}
.float_form_auth {
position: fixed;
width: 400px;
padding: 50px;
border-radius: 10px;
color: green;
background-color: rgba(22,28,29,1);
margin-left: 50%;
input {
width: 75%;
float: right;
}
.input_generate {
width: 100%;
margin-top: 20px;
display: flex;
.input_labels {
width: 20%;
font-size: 20px;
padding-top: 25px;
}
}
button {
float: right;
position: relative;
margin-top: 30px;
}
.form_info {
float: float;
position: absolute;
margin-top: 0px;
}
}
.float_form_render_sync {
position: fixed;
width: 600px;
height: 500px;
padding: 50px;
border-radius: 10px;
color: green;
background-color: rgba(22,28,29,1);
margin-top: 10%;
margin-left: 40%;
display: flex;
transition-duration: 0.2s;
overflow-y: scroll;
button {
float: left;
}
}
.float_form_render_async {
position: fixed;
width: 400px;
height: 500px;
padding: 50px;
border-radius: 10px;
color: green;
background-color: rgba(22,28,29,1);
margin-top: 10%;
margin-left: 50%;
display: flex;
transition-duration: 0.2s;
overflow: hidden;
button {
float: left;
}
select {
width: 100%;
height: 50px;
margin-top: 15px;
margin-bottom: 15px;
background-color: rgba(22,28,29,1);
color: rgba(0,128,0,1);
border: 2px solid;
border-radius: 10px;
}
}
.float_form_connect {
position: fixed;
width: 400px;
padding: 50px;
border-radius: 10px;
color: green;
background-color: rgba(22,28,29,1);
margin-top: 10%;
margin-left: 15%;
z-index: 1;
.progress_bar_form {
width: 400px - 4px;
height: 25px;
padding-top: 6px;
border: 2px solid;
border-radius: 10px;
text-align: center;
.progress_bar_progress {
background-color: green;
}
}
p {
position: absolute;
left: 30px;
top: -60px;
font-size: 20px;
font-weight: bold;
color: rgba(22,28,29,1);
}
button {
width: 100%;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
}
}
.float_form_console {
position: fixed;
width: 400px;
height: 100px;
padding: 50px;
border-radius: 10px;
color: green;
background-color: rgba(22,28,29,1);
margin-top: 25%;
margin-left: 15%;
transition-duration: 0.2s;
z-index: 0;
p {
position: absolute;
left: 30px;
top: -60px;
font-size: 20px;
font-weight: bold;
color: rgba(22,28,29,1);
}
.console_data {
width: 100%;
height: 100%;
overflow-y: scroll;
}
}
.float_form_model {
position: fixed;
width: 400px;
padding: 50px;
border-radius: 10px;
color: green;
background-color: rgba(22,28,29,1);
margin-left: 50%;
.upload_input {
width: 0px !important;
height: 0px !important;
padding-top: 70px;
padding-left: 400px;
margin-left: 0px;
color: rgba(0,128,0,1);
font-family: Ubuntu;
border: dashed 2px rgba(0,128,0,1);
overflow: hidden;
}
button {
margin-left: 0px;
}
}

50
src/styles/large.cube.scss
View File

@ -1,50 +0,0 @@
$cube-size: 400px;
$cube-color: rgba(0, 140, 0, 0.5);
$perspective: 10000px;
$animation-duration: 20s;
@mixin cube-face {
position: absolute;
width: $cube-size - 15px;
height: $cube-size - 15px;
background: $cube-color;
will-change: transform;
}
@keyframes rotateCube {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.graphic-container {
perspective: $perspective;
perspective-origin: 50% 100px; // Adjusted for better 3D effect
z-index: 1; // Lower z-index than the login form to place it behind
}
.cube {
width: $cube-size;
height: $cube-size;
position: relative;
margin: auto; // Centers the cube within the graphic container
transform-style: preserve-3d;
transform-origin: center center; // Rotates around the center of the cube
animation: rotateCube $animation-duration infinite linear;
will-change: transform;
div {
@include cube-face;
}
.front { transform: translateZ($cube-size / 2); }
.back { transform: translateZ(-$cube-size / 2) rotateY(180deg); }
.right { transform: rotateY(90deg) translateZ($cube-size / 2); }
.left { transform: rotateY(-90deg) translateZ($cube-size / 2); }
.top { transform: rotateX(90deg) translateZ($cube-size / 2); }
.bottom { transform: rotateX(-90deg) translateZ($cube-size / 2); }
}

56
src/styles/small.cube.scss
View File

@ -1,56 +0,0 @@
$cube-size: 30px;
$cube-color: rgba(0, 140, 0, 0.5);
$perspective: 10000px;
$animation-duration: 20s;
@mixin cube-face {
position: absolute;
width: $cube-size - 4px;
height: $cube-size - 4px;
background: $cube-color;
}
@keyframes rotateCube {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
.graphic-container {
display: flex;
perspective: $perspective;
perspective-origin: 50% 100px; // Adjusted for better 3D effect
z-index: 1; // Lower z-index than the login form to place it behind
.cube {
width: $cube-size;
height: $cube-size;
position: relative;
margin: auto; // Centers the cube within the graphic container
transform-style: preserve-3d;
transform-origin: center center; // Rotates around the center of the cube
animation: rotateCube $animation-duration infinite linear;
div {
@include cube-face;
}
.face-front { transform: translateZ($cube-size / 2); }
.face-back { transform: translateZ(-$cube-size / 2) rotateY(180deg); }
.face-right { transform: rotateY(90deg) translateZ($cube-size / 2); }
.face-left { transform: rotateY(-90deg) translateZ($cube-size / 2); }
.face-top { transform: rotateX(90deg) translateZ($cube-size / 2); }
.face-bottom { transform: rotateX(-90deg) translateZ($cube-size / 2); }
}
.title {
color: white;
font-size: 30px;
font-weight: 600;
margin-left: 10px;
}
}