Move device type detection to client side
We don't need the server to tell us our user agent--we can get it ourselves through navigator.userAgent and parse it on the frontend. I've replaced device-detector-js with Bowser because device-detector-js is really slow, freezing for up to 500ms to parse a single user agent.
This commit is contained in:
parent
8cfc8ebe66
commit
66953ceba3
|
@ -20,7 +20,6 @@
|
|||
"cookie-parser": "^1.4.6",
|
||||
"cors": "^2.8.5",
|
||||
"csrf-csrf": "^2.2.3",
|
||||
"device-detector-js": "^3.0.3",
|
||||
"express": "^4.18.2",
|
||||
"form-data": "^4.0.0",
|
||||
"google-translate-api-browser": "^3.0.1",
|
||||
|
@ -1777,14 +1776,6 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/device-detector-js": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/device-detector-js/-/device-detector-js-3.0.3.tgz",
|
||||
"integrity": "sha512-jM89LJAvP6uOd84at8OlD9dWP8KeYCCHUde0RT0HQo/stdoRH4b54Xl/fntx2nEXCmqiFhmo+/cJetS2VGUHPw==",
|
||||
"engines": {
|
||||
"node": ">= 8.11.4"
|
||||
}
|
||||
},
|
||||
"node_modules/digest-fetch": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/digest-fetch/-/digest-fetch-1.3.0.tgz",
|
||||
|
|
|
@ -10,7 +10,6 @@
|
|||
"cookie-parser": "^1.4.6",
|
||||
"cors": "^2.8.5",
|
||||
"csrf-csrf": "^2.2.3",
|
||||
"device-detector-js": "^3.0.3",
|
||||
"express": "^4.18.2",
|
||||
"form-data": "^4.0.0",
|
||||
"google-translate-api-browser": "^3.0.1",
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -36,6 +36,7 @@ import { chat_completion_sources, oai_settings } from './openai.js';
|
|||
import { getTokenCount } from './tokenizers.js';
|
||||
import { textgen_types, textgenerationwebui_settings as textgen_settings } from './textgen-settings.js';
|
||||
|
||||
import Bowser from '../lib/bowser.min.js';
|
||||
|
||||
var RPanelPin = document.getElementById('rm_button_panel_pin');
|
||||
var LPanelPin = document.getElementById('lm_button_panel_pin');
|
||||
|
@ -98,43 +99,22 @@ export function humanizeGenTime(total_gen_time) {
|
|||
return time_spent;
|
||||
}
|
||||
|
||||
let parsedUA = null;
|
||||
try {
|
||||
parsedUA = Bowser.parse(navigator.userAgent);
|
||||
} catch {
|
||||
// In case the user agent is an empty string or Bowser can't parse it for some other reason
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Checks if the device is a mobile device.
|
||||
* @returns {boolean} - True if the device is a mobile device, false otherwise.
|
||||
*/
|
||||
export function isMobile() {
|
||||
const mobileTypes = ['smartphone', 'tablet', 'phablet', 'feature phone', 'portable media player'];
|
||||
const deviceInfo = getDeviceInfo();
|
||||
const mobileTypes = ['mobile', 'tablet'];
|
||||
|
||||
return mobileTypes.includes(deviceInfo?.device?.type);
|
||||
}
|
||||
|
||||
/**
|
||||
* Loads device info from the server. Caches the result in sessionStorage.
|
||||
* @returns {object} - The device info object.
|
||||
*/
|
||||
function getDeviceInfo() {
|
||||
let deviceInfo = null;
|
||||
|
||||
if (sessionStorage.getItem('deviceInfo')) {
|
||||
deviceInfo = JSON.parse(sessionStorage.getItem('deviceInfo'));
|
||||
} else {
|
||||
$.ajax({
|
||||
url: '/deviceinfo',
|
||||
dataType: 'json',
|
||||
async: false,
|
||||
cache: true,
|
||||
success: function (result) {
|
||||
sessionStorage.setItem('deviceInfo', JSON.stringify(result));
|
||||
deviceInfo = result;
|
||||
},
|
||||
error: function () {
|
||||
console.log('Couldn\'t load device info. Defaulting to desktop');
|
||||
deviceInfo = { device: { type: 'desktop' } };
|
||||
},
|
||||
});
|
||||
}
|
||||
return deviceInfo;
|
||||
return mobileTypes.includes(parsedUA?.platform?.type);
|
||||
}
|
||||
|
||||
function shouldSendOnEnter() {
|
||||
|
|
|
@ -27,7 +27,6 @@ const responseTime = require('response-time');
|
|||
// net related library imports
|
||||
const net = require('net');
|
||||
const dns = require('dns');
|
||||
const DeviceDetector = require('device-detector-js');
|
||||
const fetch = require('node-fetch').default;
|
||||
const ipaddr = require('ipaddr.js');
|
||||
const ipMatching = require('ip-matching');
|
||||
|
@ -293,12 +292,6 @@ app.use(multer({ dest: UPLOADS_PATH, limits: { fieldSize: 10 * 1024 * 1024 } }).
|
|||
app.get('/', function (request, response) {
|
||||
response.sendFile(process.cwd() + '/public/index.html');
|
||||
});
|
||||
app.get('/deviceinfo', function (request, response) {
|
||||
const userAgent = request.header('user-agent');
|
||||
const deviceDetector = new DeviceDetector();
|
||||
const deviceInfo = deviceDetector.parse(userAgent || '');
|
||||
return response.send(deviceInfo);
|
||||
});
|
||||
app.get('/version', async function (_, response) {
|
||||
const data = await getVersion();
|
||||
response.send(data);
|
||||
|
|
Loading…
Reference in New Issue